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

Install codegen dependencies​

yarn add --dev @apollo-orbit/codegen @graphql-codegen/add @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @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: {
    operationResultSuffix: 'Data',
    querySuffix: 'Query',
    mutationSuffix: 'Mutation',
    subscriptionSuffix: 'Subscription',
    dedupeOperationSuffix: true,
    inlineFragmentTypes: 'combine',
    avoidOptionals: {
      field: true
    }
  },
  generates: {
    './src/app/graphql/types.ts': {
      documents: './src/app/**/*.graphql',
      plugins: [
        {
          add: {
            content: '/* eslint-disable */'
          }
        },
        'typescript',
        'typescript-operations',
        '@apollo-orbit/codegen'
      ]
    }
  }
};

export default config;

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

Update ESLint​

Add the following rule to .eslintrc.js to ensure the correct import paths are used in your application.

.eslintrc.js 
'no-restricted-imports': [
  'error',
  {
    paths: [
      {
        name: '@apollo/client',
        message: 'Please use @apollo/client/core instead.'
      },
      {
        name: '@apollo-orbit/angular/core',
        message: 'Please use @apollo-orbit/angular instead.'
      },
      {
        name: '@apollo-orbit/core',
        message: 'Please use @apollo-orbit/angular instead.'
      }
    ]
  }
]

For more information on Apollo Orbit entry points, please refer to Library Entry Point guide.