state

Overview

state function is used to create a state slice.

state provides a descriptor which can be used to define one of the following:

• typeDefs
• typePolicies
• possibleTypes
• onInit
• mutationUpdate
• effect
• optimisticResponse
• refetchQueries
• resolver
• action

Defining state

Defining a state slice is as simple as calling state function.

states/theme/theme.state.ts

export const themeState = state(descriptor => ...)

note

A state slice file name should be in the format <stateName>.state.ts, this is a requirement as per our setup guide.
<stateName> is singular by convention for simplicity.

Adding state

Once a state slice is created it needs to be provided to ApolloOrbitProvider states array.

ApolloOrbitProvider must be nested under ApolloProvider to ensure that it has access to the ApolloClient instance used in the app.

ApolloOrbitProvider can be used multiple times and at at any level in the application, including in lazy loaded components.

Example

index.tsx

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

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

onInit

onInit defines a callback that is invoked when the state is initialised.

states/theme/theme.state.ts

export const themeState = state(descriptor => descriptor
  .onInit(cache => cache.writeQuery(...))
);

onInit callback accepts the cache instance and can be used to initialise cache data for the state. More on this in local state guide.