apollo-link-state и как мне получить доступ к локальному состоянию / кешу?

Question

Возможно, я просто не понимаю, что делает apollo-link-state, но я подумал, что если бы у меня было значение "по умолчанию", то TH будет отображаться в моих реквизитах через провайдера. Тем не менее, я не могу найти это. Как вы получаете доступ к "кешу" или локальному состоянию?

Я имею:

import { ApolloClient, createNetworkInterface } from 'react-apollo';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { withClientState } from 'apollo-link-state';
import dataIdFromObject from './dataIdFromObject';

const defaults = {
  NAME: 'Biff'
};
const resolvers = {};

const cache = new InMemoryCache();
const stateLink = withClientState({ cache, resolvers, defaults });

const apolloClient = new ApolloClient({
  cache,
  link: stateLink,
  networkInterface: createNetworkInterface({
    uri: `${config.url}/graphql`,
    opts: {
      credentials: 'include'
    }
  }),
  addTypename: true,
  dataIdFromObject
});

Я передаю пустой объект для моих резольверов, поскольку абсолютно бессмысленно копировать все редукторы, которые есть в бэкэнде. Я подумал, что увижу "имя: Бифф" в реквизите. Нету.

Этот магазин - мой "магазин" и не является частью этого вопроса. Я рассчитывал с этой "клиентской" опорой, я бы увидел свой дефолт. Нету.

  <ApolloProvider store={this.props.store} client={apolloClient}>

когда я регистрирую свои реквизиты в дочернем компоненте, нигде не появляется никаких признаков кэша или "name: Biff". Как мне добраться до этого локального состояния в моих дочерних компонентах. Если я обновлю его с помощью мутации, я должен увидеть, как мои компоненты будут перерисованы и иметь доступ к этому обновленному локальному состоянию... но... где это?

Answer 1

Как указано в документации, вы запрашиваете локальное состояние точно так же, как вы запрашиваете удаленный сервер, за исключением того, что @client директива, чтобы Аполлон знал, что вы запрашиваете что-то через apollo-link-state, Итак, нам нужен запрос GraphQL, обернутый graphql-tag шаблон буквенного тега:

const GET_NAME = gql`
  query {
    NAME @client
  }
`

И мы используем его, как и любой другой запрос:

<Query query={GET_NAME}>
  {({ loading, error, data }) => {
    // render appropriate component depending on loading/error state
  }}
</Query>

В то время как Apollo предоставляет методы для чтения и записи в кэш, они должны использоваться только в контексте создания мутаций для вашего локального состояния. Запросы к кешу должны выполняться через Query компонент и на самом деле мутирование кеша должно быть сделано через Mutation составная часть. Вы можете прочитать больше о написании ваших собственных мутаций в документации.