Использование apollo-cache-persist и apollo-link-state заканчивается в неопределенном состоянии кеша

Когда я действительно выполняю вход, я могу выполнить запрос currentUser и увидеть токен в кеше, но когда я обновляю приложение, токен возвращается null,

const currentUser = {
  defaults: {
    currentUser: {
      __typename: 'CurrentUser',
      token: null,
    },
  },
  resolvers: {
    Mutation: {
      updateCurrentUser: (_, { token }, { cache }) => {
        cache.writeData({
          data: {
            __typename: 'Mutation',
            currentUser: {
              __typename: 'CurrentUser',
              token,
            },
          },
        });

        return null;
      },
    },
  },
};

export default currentUser;

мой код установки клиента выглядит следующим образом:

import { AsyncStorage } from 'react-native';
import {
  ApolloClient,
  HttpLink,
  InMemoryCache,
  IntrospectionFragmentMatcher,
} from 'apollo-client-preset';
import { Actions as RouterActions } from 'react-native-router-flux';
import { persistCache } from 'apollo-cache-persist';
import { propEq } from 'ramda';
import { setContext } from 'apollo-link-context';
import { withClientState } from 'apollo-link-state';

import fragmentTypes from './data/fragmentTypes';
import config from './config';
import { onCatch } from './lib/catchLink';
import { defaults, resolvers } from './resolvers';
import { CurrentUserQuery } from './graphql';

const cache = new InMemoryCache({
  fragmentMatcher: new IntrospectionFragmentMatcher({
    introspectionQueryResultData: fragmentTypes,
  }),
});

persistCache({
  cache,
  storage: AsyncStorage,
  trigger: 'write',
});

const httpLink = new HttpLink({
  uri: `${config.apiUrl}/graphql`,
});

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

const contextLink = setContext((_, { headers }) => {
  const { currentUser: { token } } = cache.readQuery(CurrentUserQuery());
  return {
    headers: {
      ...headers,
      authorization: token && `Bearer ${token}`,
    },
  };
});

const catchLink = onCatch(({ networkError = {} }) => {
  if (propEq('statusCode', 401, networkError)) {
    // remove cached token on 401 from the server
    RouterActions.unauthenticated({ isSigningOut: true });
  }
});

const link = stateLink
  .concat(contextLink)
  .concat(catchLink)
  .concat(httpLink);

export default new ApolloClient({
  link,
  cache,
});

2 ответа

Регидратация кеша - это асинхронная операция, и, возможно, ваш запрос выполняется до регидратации кеша.

Можно ждать persistCache который возвращает обещание, которое разрешается после восстановления кэша.

Возможно, попробуйте использовать пакет Apollo Link, чтобы присоединиться к ссылкам.

import {ApolloLink} from 'apollo-link';
//....
//....
//....
const link = ApolloLink.from([stateLink,contextLink, catchLink, httpLink]);

PS: Я написал статью о состоянии ссылки apollo, если вы хотите проверить ее https://hptechblogs.com/central-state-management-in-apollo-using-apollo-link-state/

Другие вопросы по тегам