Управление состоянием входа и кеширование для React Native с клиентом Apollo - PullRequest
Новая
       26

Управление состоянием входа и кеширование для React Native с клиентом Apollo

0 голосов
/ 03 августа 2020

Я изучаю graphQL с помощью React native и использую клиент apollo. Я экспериментирую с кодом, который имеет простой экран входа в систему, и пытаюсь проверить свое понимание кеша. Мой клиентский код graphql ниже. Включив отладку для persistCache, я вижу строку при использовании CMD + R для перезагрузки симулятора iOS с помощью expo. Это говорит о том, что кеш работает. 

[apollo-cache-persist] Restored cache of size 29

Мой вопрос в том, что еще нужно, чтобы завершить общий процесс без необходимости повторного входа в систему? Я предполагаю, что мне нужно следить за тем, вошел ли он в систему, и не показывать экран входа в систему. Я ищу несколько примеров, которые это показывают. 

const retryLink = new RetryLink({
  delay: {
    initial: 300,
    max: 5000,
    jitter: true
  },
  attempts: {
    max: Infinity,
    retryIf: (error = {}) => {
      return error.statusCode > 299 || !error.statusCode
    }
  }
});

const formatObject = data => _.isObject(data) ? JSON.stringify(data) : data;

const formatGraphQLError = err =>
  `Message: ${err.message}, Location: ${formatObject(
    err.locations
  )}`;

const errorLink = onError(({ networkError = "", graphQLErrors = [] } = {}) => {
  if (networkError)
    console.log(`[Network Error]: ${networkError}`);

  if (graphQLErrors.length)
    graphQLErrors.map(formatGraphQLError).forEach(err => console.log(`[GraphQL Error]: ${err}`))
});

const authLink = setContext(async (_, { headers }) => {
  const token = await Auth.token();
  if (token)
    return {
      headers: {
        ...headers,
        authorization: `Bearer ${token}`
      }
    };
  else return { headers };
});

const httpLink = new HttpLink({
  uri: Config.apiUrl
});

const cache = new InMemoryCache();

// Set up cache persistence.
persistCache({
  cache,
  storage: AsyncStorage,
  trigger: 'background',
  debug: true
});

const logLink = new ApolloLink((operation, forward) => {
  console.log("Running GraphQL query or mutation");
  return forward(operation);
});

//--
//-- Combine the links in your required order.
//--

let _notifications = 42;

const client = new ApolloClient({
  resolvers: {
    Query: {
      permission: async (_, { type }) => await Permissions.askAsync(type),
      token: async () => await Auth.token(),
      notifications: () => _notifications
    },
    Mutation: {
      login: async (_, { email, password }) => {
        return await Auth.login(email, password)
      },
      updateNotifications: async (_, { notifications }) => _notifications = notifications
    }
  },
  link: ApolloLink.from([
    logLink,
    retryLink,
    errorLink,
    authLink,
    httpLink
  ]),
  cache
});

export default client;
...