Client-side schema
Extend your schema with client-specific fields
You can optionally provide a client-side schema to Apollo Client that defines local-only types and fields. You can define completely new types, or extend types from your server's schema with new fields.
As with any GraphQL schema, your client-side schema must be written in Schema Definition Language.
The client-side schema is not used to validate operations like it is on the server (the graphql-js
modules for schema validation would dramatically increase your bundle size). Instead, your client-side schema is used for introspection in the Apollo Client Devtools, where you can explore your schema in GraphiQL.
Setup
The following demonstrates how to define a client-side schema and provide it to the ApolloClient
constructor:
1import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
2
3const typeDefs = gql`
4 extend type Query {
5 isLoggedIn: Boolean!
6 cartItems: [Launch]!
7 }
8
9 extend type Launch {
10 isInCart: Boolean!
11 }
12
13 extend type Mutation {
14 addOrRemoveFromCart(id: ID!): [Launch]
15 }
16`;
17
18const client = new ApolloClient({
19 cache: new InMemoryCache(),
20 uri: 'http://localhost:4000/graphql',
21 typeDefs,
22});
If you open up the Apollo Client Devtools and click on the GraphiQL
tab, you'll be able to explore your client schema in the "Docs" section. This example doesn't include a remote schema, but if it did, you would be able to see your local queries and mutations alongside your remote ones.