What is the @client directive in Apollo Client?
Answer
The @client directive marks a field as a local-only field that should be resolved from the Apollo Client cache rather than sent to the server. This allows mixing server data with client-side local state in a single query. Example: const GET_USER_WITH_UI = gql\` query { user(id: "1") { name email } isCartOpen @client sidebarWidth @client }\`; — isCartOpen and sidebarWidth are resolved locally using field read policies or reactive variables. Local fields can be combined with remote fields seamlessly. Write local data: client.writeQuery({ query: LOCAL_STATE, data: { isCartOpen: true } }) or use cache.modify. The @client directive is excluded from the network request — the server never sees it. This is Apollo's built-in approach to local state management.
Previous
What are Apollo Client's reactive variables?
Next
What is deferred query execution in GraphQL?
More GraphQL Questions
View all →- Intermediate How do you implement pagination in GraphQL?
- Intermediate What is the Relay specification in GraphQL?
- Intermediate How do you implement authorization in GraphQL resolvers?
- Intermediate What is graphql-shield and how does it work?
- Intermediate How do you implement real-time subscriptions with GraphQL?