graphql-client-integrationlisted
Install: claude install-skill Claudient/Claudient
# GraphQL Client Integration
## When to activate
- Setting up a GraphQL client in a React or Next.js project
- Consuming a GraphQL API with typed queries
- Configuring Apollo Client, urql, or Tanstack Query with GraphQL
- Adding GraphQL Code Generator for TypeScript type generation
- Implementing optimistic updates, subscriptions, or cache management
- User asks how to write a `useQuery`, `useMutation`, or `useSubscription` hook
## When NOT to use
- The project is building a GraphQL **server** — use a backend skill instead
- The API is REST-only — no GraphQL endpoint exists
- The project already has a configured GraphQL client and just needs a query written — no setup needed, write the query directly
## Instructions
### Apollo Client Setup (React / Next.js)
**Install:**
```bash
npm install @apollo/client graphql
```
**Client configuration** (`lib/apollo-client.ts`):
```typescript
import { ApolloClient, InMemoryCache, HttpLink, from } from "@apollo/client";
import { onError } from "@apollo/client/link/error";
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.forEach(({ message, locations, path }) =>
console.error(`GraphQL error: ${message}`, { locations, path })
);
}
if (networkError) console.error("Network error:", networkError);
});
const httpLink = new HttpLink({ uri: process.env.NEXT_PUBLIC_GRAPHQL_URL });
export const client = new ApolloClient({
link: from([errorLink, httpLink]),
cache: n