Skip to main content

Setup Environment

The following steps will get you fully setup with @apollo-orbit/angular and @apollo-orbit/codegen.
All the code samples in the docs assume that the following steps were completed successfully.

Setup @apollo-orbit/angular​

yarn add @apollo-orbit/angular @apollo/client graphql

Setup @apollo-orbit/codegen​

tip

While 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

Orbit is compatible with any codegen tool that supports TypedDocumentNode.

Install codegen dependencies​

yarn add --dev @apollo-orbit/codegen @graphql-codegen/add @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/plugin-helpers @graphql-codegen/visitor-plugin-common concurrently @parcel/watcher

Update package.json​

package.json
"scripts": {
  "start": "concurrently --raw \"yarn codegen --watch\" \"ng serve\"",
  "codegen": "graphql-codegen --config ./codegen.ts",
  ...
}
info

concurrently is used here in order to run codegen in watch mode side by side with your Angular application when running yarn start.
yarn codegen can also be executed manually to trigger GraphQL codegen.

Create codegen.ts​

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

const config: CodegenConfig = {
  schema: [
    'http://localhost:4000/graphql',
    {
      './src/app/**/*.state.ts': {
        noRequire: true
      }
    }
  ],
  config: {
    importSchemaTypesFrom: './src/app/graphql/types.ts',
    useTypeImports: true,
    operationResultSuffix: 'Data',
    dedupeOperationSuffix: true,
    inlineFragmentTypes: 'combine',
    avoidOptionals: {
      field: true
    }
  },
  generates: {
    './src/app/graphql/types.ts': {
      plugins: [
        {
          add: {
            content: '/* eslint-disable */'
          }
        },
        'typescript'
      ]
    },
    './src/app/graphql/operations.ts': {
      documents: './src/app/**/*.graphql',
      plugins: [
        {
          add: {
            content: '/* eslint-disable */'
          }
        },
        'typescript-operations',
        '@apollo-orbit/codegen'
      ]
    }
  }
};

export default config;

This generates two files:

  • types.ts: schema types (object types, inputs, enums) generated by the typescript plugin. These are useful for typing cache & state logic such as type policies and resolvers.
  • operations.ts: operation types, typed gql documents and gql* functions generated by typescript-operations and @apollo-orbit/codegen.

Create index.ts barrel​

src/app/graphql/index.ts
export * from './types';
export * from './operations';

This allows the rest of the application to import both schema types and operations from a single path: app/graphql.

More information on @apollo-orbit/codegen can be found in the Codegen guide.

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/app/**/*.state.ts'
  ],
  documents: [
    'src/app/**/*.graphql'
  ],
  extensions: {
    customDirectives: [
      'directive @client on FIELD' // required for Apollo Client local schema
    ]
  }
};

For more information, visit configuration documentation