Skip to main content

resolver

Overview​

resolver is analogous to resolvers option passed to ApolloOptions.
It allows implementing local resolvers.

note

It is recommended to use field policies instead of local resolvers as described in Local-only fields.
Local resolver support will be moved out of the core of Apollo Client in a future major release. The same or similar functionality will be available via ApolloLink.

Usage​

Let's modify bookState to to return displayName for each Book which is a concatenation of the book name and genre.

library/states/book.state.ts
import { gql, state } from '@apollo-orbit/angular';
import { Book } from '../../graphql/types';

export const bookState = state(descriptor => descriptor
  .typeDefs(gql`
    extend type Book {
      displayName: String!
    }
  `)
  .resolver(['Book', 'displayName'], (rootValue: Book, args, context, info): Book['displayName'] => {
    const { name, genre } = rootValue;
    return typeof genre === 'string' ? `${name} (${genre})` : name;
  })
);

Since *.state.ts files are included in our codegen configuration, defining local schema using typeDefs will get automatically picked up by codegen.

Next, we update book.graphql to include displayName field:

library/gql/book.graphql
fragment BookFragment on Book {
  id
  name
  genre
  authorId
  displayName @client
}

...

Now, displayName can be used in the component to display the book name along with genre.

API​

resolve methods can return a value, promise or observable.

In order to implement the same functionality using field policies, we can modify bookState as follows:

library/states/book.state.ts
import { gql, state } from '@apollo-orbit/angular';
import { Book } from '../../graphql/types';

export const bookState = state(descriptor => descriptor
  .typeDefs(gql`
    extend type Book {
      displayName: String!
    }
  `)
  .typePolicies({
    Book: {
      fields: {
        displayName: (_existing, { readField }) => {
          const name = readField<Book['name']>('name');
          const genre = readField<Book['genre']>('genre');
          return typeof genre === 'string' ? `${name} (${genre})` : name;
        }
      }
    }
  })
);