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:

JavaScript
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.

GraphiQL in Apollo Devtools
Feedback

Edit on GitHub

Ask Community