Agent skill
urql
You are an expert in urql, the highly customizable and lightweight GraphQL client for React, Vue, Svelte, and vanilla JavaScript. You help developers fetch GraphQL data with minimal bundle size, document caching, normalized caching via Graphcache, exchanges (middleware pipeline), subscriptions, and offline support — providing a leaner alternative to Apollo Client with better extensibility.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/urql
Metadata
Additional technical details for this skill
- tags
-
graphql react client lightweight cache exchange typescript
- author
- terminal-skills
- version
- 1.0.0
- category
- Frontend Development
SKILL.md
urql — Lightweight GraphQL Client
You are an expert in urql, the highly customizable and lightweight GraphQL client for React, Vue, Svelte, and vanilla JavaScript. You help developers fetch GraphQL data with minimal bundle size, document caching, normalized caching via Graphcache, exchanges (middleware pipeline), subscriptions, and offline support — providing a leaner alternative to Apollo Client with better extensibility.
Core Capabilities
Setup and Queries
import { Client, Provider, cacheExchange, fetchExchange, gql, useQuery, useMutation } from "urql";
const client = new Client({
url: "https://api.example.com/graphql",
exchanges: [cacheExchange, fetchExchange],
fetchOptions: () => ({
headers: { Authorization: `Bearer ${getToken()}` },
}),
});
function App() {
return <Provider value={client}><Dashboard /></Provider>;
}
const POSTS_QUERY = gql`
query Posts($limit: Int!) {
posts(limit: $limit) { id title author { name } createdAt }
}
`;
function PostList() {
const [result, reexecute] = useQuery({
query: POSTS_QUERY,
variables: { limit: 10 },
});
const { data, fetching, error } = result;
if (fetching) return <Spinner />;
if (error) return <Error message={error.message} />;
return (
<div>
{data.posts.map(p => <PostCard key={p.id} post={p} />)}
<button onClick={() => reexecute({ requestPolicy: "network-only" })}>Refresh</button>
</div>
);
}
Mutations
const CREATE_POST = gql`
mutation CreatePost($input: CreatePostInput!) {
createPost(input: $input) { id title createdAt }
}
`;
function CreatePostForm() {
const [result, createPost] = useMutation(CREATE_POST);
const handleSubmit = (data: any) => {
createPost({ input: data }).then(result => {
if (result.error) console.error(result.error);
});
};
return <Form onSubmit={handleSubmit} loading={result.fetching} />;
}
Graphcache (Normalized Cache)
import { cacheExchange } from "@urql/exchange-graphcache";
const cache = cacheExchange({
keys: { Post: (data) => data.id as string },
resolvers: {
Query: {
post: (_, args) => ({ __typename: "Post", id: args.id }),
},
},
updates: {
Mutation: {
createPost(result, _args, cache) {
cache.updateQuery({ query: POSTS_QUERY, variables: { limit: 10 } }, (data) => {
if (data) data.posts.unshift(result.createPost);
return data;
});
},
},
},
});
Installation
npm install urql graphql
npm install @urql/exchange-graphcache # Optional normalized cache
Best Practices
- Document cache — Default cache deduplicates by query+variables; sufficient for most apps
- Graphcache for complex — Use normalized cache only when you need cache updates across queries
- Exchanges — urql's middleware pipeline; add auth, retry, persist, logging as composable exchanges
- Request policies — Use
cache-first(default),network-onlyfor refresh,cache-and-networkfor stale-while-revalidate - Bundle size — urql core is ~5KB gzipped (vs Apollo ~30KB); ideal for performance-sensitive apps
- SSR support — Use
ssrExchangefor server-side rendering; hydrates cache on client - Subscriptions — Add
subscriptionExchangefor WebSocket/SSE subscriptions; plug and play - Framework agnostic — Works with React, Vue, Svelte, and vanilla JS; same core, different bindings
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?