Skip to main content Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-graphql --skill graphql-apollo-clientO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Explorador de arquivos
6 arquivos 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 