Управление внешним состоянием с клиентом Apollo? - PullRequest
Новая
       11

Управление внешним состоянием с клиентом Apollo?

0 голосов
/ 20 января 2019

Я вижу много людей, использующих Redux и Mobx с клиентом Apollo.Однако после прочтения документации упоминается, что вам, возможно, это не нужно:

В идеале мы хотели бы, чтобы кэш Apollo был единственным источником правды для всех данных в нашем клиентском приложении.

Как можно разделить глобальное состояние в клиенте Apollo?И действительно ли нужен mobx или redux?

1 Ответ

0 голосов
/ 20 января 2019

Нет необходимости в мобх или редуксе.

Apollo-link-state достаточно для управления состоянием локального приложения и является единственным источником правды для ваших данных.

import {withClientState} from 'apollo-link-state'
import typeDefs from '../schema/schema'
import resolvers from '../resolvers'

const initialState = {
  intialData: [],
 myData: {
    __typename: 'MyDataType',

  },
}

async function getLocalLinkState(cache) {
  const stateLink = withClientState({
    cache,
    defaults: initialState,
    resolvers: resolvers,
    typeDefs
  })
  return stateLink
}

export default getLocalLinkState

В основном вы создаете typedefs (не обязательно) и распознаватели так же, как ваш сервер GraphQL.

Таким образом, ваш initialState будетбыть общим как глобальное состояние, которое вы можете читать или записывать, используя запросы на стороне клиента и мутации на стороне клиента.

Эти запросы и мутации на стороне клиента будут разрешаться распознавателями на стороне клиента, а не распознавателями на стороне сервера (если вы использовали @клиент)

Запрос на стороне клиента: 

const query = gql`
{
  counter @client
}
`;

Примеры средств разрешения мутаций 

decrementCounter: (_, params, { cache }) => {
      const { counter } = cache.readQuery({ query });
      const nextCounter = counter - 1;
      const data = {
        counter: nextCounter,
      };
      cache.writeData({ data });
      return nextCounter;
    },
    incrementCounter: (_, params, { cache }) => {
      const { counter } = cache.readQuery({ query });
      const nextCounter = counter + 1;
      const data = {
        counter: nextCounter,
      };
      cache.writeData({ data });
      return nextCounter;
    },

Любые компоненты, потребляющие локальныеСостояние приложения будет обновлено, если произойдет какое-либо изменение в части состояния приложения, которое они потребляют.

...