Skip to main content

Getting Started

Prerequisites​

In order to use Apollo Orbit, you'll need a React project setup with Apollo Client.
If not, please follow the Apollo Client setup guide before proceeding.

Install @apollo-orbit/react​

yarn add @apollo-orbit/react

Setup GraphQL Codegen​

tip

While Apollo Orbit can work fully without codegen, it is highly recommended to use codegen in order to improve developer experience and enable compile-time safety across your application, cache & state logic.

info

Apollo Orbit is compatible with any codegen tool that supports TypedDocumentNode.

You can follow GraphQL-Codegen React guide to setup codegen for your project.

Then, update codegen.ts to include state files in the schema:

codegen.ts
import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: [
    'http://localhost:4000/graphql',
    {
      './src/**/*.state.ts': {
        noRequire: true
      }
    }
  ],
  ...
};

export default config;

Setup GraphQL syntax highlighting & auto-complete​

Install VSCode extension​

GraphQL: Language Feature Support

Create graphql.config.js​

Create the following file in the root folder of your project.

graphql.config.js
module.exports = {
  schema: [
    'http://localhost:4000/graphql',
    'src/**/*.state.ts'
  ],
  documents: [
    'src/**/*.graphql'
  ],
  extensions: {
    customDirectives: [
      'directive @client on FIELD' // required for Apollo Client local schema
    ]
  }
};

If you already have the extension setup in your project, make sure to include state files in the schema by adding the highlighted line above.

For more information, visit configuration documentation

Provide states​

Finally, we can provide states to Apollo Orbit by adding ApolloOrbitProvider under ApolloProvider:

index.tsx
import { themeState } from './states/theme.state';

root.render(
  <ApolloProvider client={client}>
    <ApolloOrbitProvider states={[themeState]}>
      <App />
    </ApolloOrbitProvider>
  </ApolloProvider>,
);

The next section will cover in detail how to create and provide states in your React application.