Skip to main content Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-graphql --skill graphql-apollo-clientLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Métiers associés SOC
Basé sur la classification professionnelle SOC
Explorateur de fichiers
6 fichiers name graphql-apollo-client description Build React apps with Apollo Client - queries, mutations, cache, and subscriptions sasmp_version 1.3.0 bonded_agent 05-graphql-apollo-client bond_type PRIMARY_BOND version 2.0.0 complexity intermediate estimated_time 4-6 hours prerequisites ["graphql-fundamentals"]
Apollo Client Skill
Master GraphQL in React applications
Overview
Learn to integrate Apollo Client with React, including hooks, cache management, optimistic updates, and real-time subscriptions.
Quick Reference
Hook Purpose Returns useQueryFetch data { data, loading, error, refetch }useMutationModify data [mutate, { data, loading, error }]useSubscriptionReal-time { data, loading, error }useLazyQueryOn-demand fetch [execute, { data, loading }]
Core Patterns
1. Client Setup
import {
ApolloClient ,
InMemoryCache ,
ApolloProvider ,
createHttpLink,
from
} from '@apollo/client' ;
import { setContext } from '@apollo/client/link/context' ;
import { onError } from '@apollo/client/link/error' ;
const httpLink = createHttpLink ({
uri : 'http://localhost:4000/graphql' ,
credentials : 'include' ,
});
const authLink = setContext ((_, { headers } ) => ({
headers : {
...headers,
authorization : localStorage
getItem
'token'
`Bearer ${localStorage .getItem('token' )} `
''
const
onError
({ graphQLErrors, networkError } ) =>
if
forEach
({ message, extensions } ) =>
if
code
'UNAUTHENTICATED'
window
location
href
'/login'
const
new
InMemoryCache
typePolicies
User
keyFields
'id'
Query
fields
users
keyArgs
'filter'
merge
existing, incoming, { args }
if
after
return
return
edges
edges
edges
const
new
ApolloClient
link
from
function
App
return
<ApolloProvider client ={client} >
<Router />
</ApolloProvider >
2. Queries import { gql, useQuery } from '@apollo/client' ;
const GET_USER = gql`
query GetUser( $id : ID! ) {
user( id : $id ) {
id
name
email
}
}
` ;
function UserProfile ({ userId } ) {
const { data, loading, error, refetch } = useQuery (GET_USER , {
variables : { id : userId },
fetchPolicy : 'cache-and-network' ,
pollInterval : 60000 ,
skip : !userId,
});
if (loading) return <Spinner /> if (error) return <Error onRetry ={refetch} /> return <div > {data.user.name}</div > function UserList (const { data, fetchMore, networkStatus } = useQuery (GET_USERS , {
variables : { first : 10 },
notifyOnNetworkStatusChange : true ,
});
const loadMore = (fetchMore ({
variables : { after : data.users .pageInfo .endCursor },
});
};
return (
<>
{data?.users.edges.map(({ node }) => (
<UserCard key ={node.id} user ={node} />
))}
{data?.users.pageInfo.hasNextPage && (
<button onClick ={loadMore} > Load More</button >
)}
</>
3. Mutations const CREATE_USER = gql`
mutation CreateUser( $input : CreateUserInput! ) {
createUser( input : $input ) {
user { id name email }
errors { field message }
}
}
` ;
function CreateUserForm (const [createUser, { loading }] = useMutation (CREATE_USER , {
update (cache, { data } ) {
if (!data?.createUser .user ) return ;
cache.modify ({
fields : {
users (existing = { edges: [] } ) {
const newRef = cache.writeFragment ({
data : data.createUser .user ,
fragment : gql`fragment NewUser on User { id name email } `return {
...existing,
edges : [{ node : newRef }, ...existing.edges ],
};
},
},
});
},
optimisticResponse : (vars ) => ({
createUser : {
__typename : 'CreateUserPayload' ,
user : {
__typename : 'User' ,
id : 'temp-' + Date .now (),
...vars.input ,
},
errors : [],
},
}),
});
const handleSubmit = async (input ) => {
const { data } = await createUser ({ variables : { input } });
if (data?.createUser .errors .length ) {
}
};
return <Form onSubmit ={handleSubmit} loading ={loading} />
4. Optimistic Updates
const [deleteUser] = useMutation (DELETE_USER , {
optimisticResponse : {
deleteUser : { success : true , id : userId },
},
update (cache, { data } ) {
cache.evict ({ id : cache.identify ({ __typename : 'User' , id : userId }) });
cache.gc ();
},
});
const [toggleLike] = useMutation (TOGGLE_LIKE , {
optimisticResponse : {
toggleLike : {
__typename : 'Post' ,
id : post.id ,
isLiked : !post.isLiked ,
likeCount : post.isLiked ? post.likeCount - 1 : post.likeCount + 1 ,
},
},
});
5. Subscriptions import { useSubscription } from '@apollo/client' ;
import { GraphQLWsLink } from '@apollo/client/link/subscriptions' ;
import { createClient } from 'graphql-ws' ;
import { split } from '@apollo/client' ;
import { getMainDefinition } from '@apollo/client/utilities' ;
const wsLink = new GraphQLWsLink (
createClient ({
url : 'ws://localhost:4000/graphql' ,
connectionParams : () => ({
authToken : localStorage .getItem ('token' ),
}),
})
);
const splitLink = split (
({ query } ) => {
const def = getMainDefinition (query);
return def.kind === 'OperationDefinition' && def.operation === 'subscription' ;
},
wsLink,
httpLink,
);
const MESSAGE_SUB = gql`
subscription OnMessage( $channelId : ID! ) {
messageSent( channelId : $channelId ) {
id
content
sender { name }
}
}
` ;
function Chat ({ channelId } ) {
const { data } = useSubscription (MESSAGE_SUB , {
variables : { channelId },
});
}
Troubleshooting Issue Cause Solution Stale data Cache not updated Add update function Duplicates Missing keyFields Configure typePolicies Refetch loop Variables object recreated useMemo variables No subscription Missing split link Add wsLink
Debug
console .log (client.cache .extract ());
import { ApolloLink } from '@apollo/client' ;
const logLink = new ApolloLink ((operation, forward ) => {
console .log ('Request:' , operation.operationName );
return forward (operation);
});
Usage Skill("graphql-apollo-client")
Related Skills
graphql-fundamentals - Query syntaxgraphql-apollo-server - Server integrationgraphql-codegen - Type generation
Related Agent
05-graphql-apollo-client - For detailed guidance 