⬡ GraphQL Intermediate

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.