apollo-link-state writeQuery не обновляет ROOT_QUERY в кеше, предотвращая повторную визуализацию компонента - PullRequest
Новая
       12

apollo-link-state writeQuery не обновляет ROOT_QUERY в кеше, предотвращая повторную визуализацию компонента

0 голосов
/ 27 августа 2018

Я реализую OAuth с пользовательским провайдером. Таким образом, у меня есть Auth компонент, где внутри 'componentDidMount: 

client.mutate({
  mutation: CURRENT_USER_MUTATION,
  variables: {
    token: (response.data.token.value) || null,
   },
});

Моя мутация выглядит так: 

gql`
  mutation($token: String!) {
    CurrentUser(token: $token) @client
  }
`;

И у меня есть резольвер: 

defaults: {
  current_user: null,
},
resolvers: {
  Mutation: {
    CurrentUser: (_: any, { token }: { token: string }, { cache }: { cache: Object }): null => {
    const { user } = decodeJWT(token);

    cache.writeQuery({
      query: CURRENT_USER,
      data: {
        current_user: {
          __typename: 'user',
          id: user.id,
          name: user.name,
          level: user.level,
          email: user.email,
        },
      },
    });

    return cache.readQuery({ query: CURRENT_USER });
  },
},

А потом что-то происходит, когда я заглядываю внутрь отладчика Chrome Apollo, я ясно вижу это:

chrome apollo dev tool

Таким образом, данные уже находятся в кэше Apollo, но ROOT_QUERY по-прежнему имеет значение null в качестве текущего пользователя.

Также, когда я пытаюсь использовать react-apollo Mutation компонент, подобный этому: 

<Mutation mutation={CURRENT_USER_MUTATION}>
  {(mutate: Function,): React.Node => {
    return (
      <button type="button" onClick={(): Function => mutate(({ variables: { token: '123' } }: Object))}>
        Do it
       </button>
     );
   }}
 </Mutation>

Тогда все работает отлично.

Так выглядит после использования cache.writeQuery другой компонент / кеш не уведомляет о запущенной мутации.

Буду благодарен за помощь:)

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Похоже, что ваша CurrentUser мутация неправильная.

Эта шоуд работа: 

Mutation: {
  CurrentUser: (_: any, { token }: { token: string }, { cache }: { cache: Object 
}): null => {
  const { user } = decodeJWT(token);

  cache.writeQuery({
    query: CURRENT_USER,
    data: {
      current_user: {
        __typename: 'user',
        id: user.id,
        name: user.name,
        level: user.level,
        email: user.email,
      },
    },
  });

  return {
      current_user: {
        __typename: 'user',
        id: user.id,
        name: user.name,
        level: user.level,
        email: user.email,
      },
    }
},
0 голосов
/ 27 августа 2018

Итак, в конце концов, я обнаружил, что проблема была в другом месте: P Мой друг Михал предложил мне это, сделав рабочий пример моего кода здесь: https://codesandbox.io/s/l57k8v3o67

Итак, несколько выводов: 1. компонент будет повторно извлекать / перерисовывать только при обнаружении взаимодействия с пользователем. Например, щелчок, вот почему работает компонент с нажимной кнопкой или сделан какой-то запрос к серверу.

  1. В Apollo есть несколько ошибок :) У меня есть другой компонент, который называется <PrivateRoute />, в основном проверяя, есть ли у нас current_user, а затем перенаправляем или отображаем маршрут, вот оно: https://gist.github.com/bslipek/b11caefba31599e30d498beaf8644cec И у этого компонента есть ошибка с проблемой от до: https://github.com/apollographql/apollo-link-state/issues/236

Так что, в основном, если вы визуализируете компонент с запросом в локальном состоянии, и вы не установите fetchPolicy='cache-first' Apollo вернется к значению по умолчанию.

...