Почему запрос Apollo не возвращает обновленное значение из кэша после сброса магазина? - PullRequest
Новая
       58

Почему запрос Apollo не возвращает обновленное значение из кэша после сброса магазина?

0 голосов
/ 24 марта 2020

Я недавно добавил Apollo локальное государство к моему сайту реагировать / следующий. js. Я использую функцию Apollo client.writeData для обновления кэша и useQuery для получения обновлений. Все работает, но если я запускаю Apollo client.resetStore() и затем выполняю действия, которые обновляют кэш, компоненты, использующие useQuery для получения обновленных значений, больше не получают значения / update. Таким образом, мои изменения в местном состоянии перестают действовать после client.resetStore(). Я проверил, что сам кэш обновляется с помощью инструментов разработчика Apollo. Так что useQuery не перезапускается как-то, когда значения обновляются. Не уверен, что мне не хватает.

Это настройка клиента Apollo: 

import withApollo from 'next-with-apollo';
import ApolloClient, { InMemoryCache } from 'apollo-boost';
import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import introspectionQueryResultData from '../../fragmentTypes.json';
import { gqlTypes } from 'helpers';

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData
});

function createClient({ ctx, headers, initialState }) {
  const cache = new InMemoryCache({ fragmentMatcher });
  const client = new ApolloClient({
    credentials: 'include',
    uri: 'graphql_url',
    cache: cache.restore(initialState || {}),
    headers: {
      cookie: headers?.cookie
    },
    resolvers: {}
  });

  // initialize state
  const initialLocalState = {
    callToReview: {
      __typename: gqlTypes.CallToReviewData,
      overallRating: 0,
      openUserReviewForm: false
    }
  };

  cache.writeData({
    data: initialLocalState
  });

  client.onResetStore(() => cache.writeData({ data: initialLocalState }));
  return client;
}

export default withApollo(createClient, { getDataFromTree: 'ssr' });

Это мой запрос: 

query consumptionAndCallToReview {
  consumptionMethods {
    _id
    slug
  }
  callToReview @client(always: true) {
    overallRating
    openUserReviewForm
  }
}

Это мой компонент: 

import React, { useEffect } from 'react'
const MyComponent = props => {
  const callToReviewData = useQuery(consumptionAndCallToReviewQuery);
  useEffect(() => {
    if (callToReviewData?.openUserReviewForm) {
      // do something...
    }
  }, [callToReviewData]);

  return (
    // ...jsx
  )
}

и, наконец, это я сбрасываю магазин на: 

import React, { useEffect } from 'react'
import { useApolloClient } from 'react-apollo';
const ResetComponent = props => {
  const client = useApolloClient();
  useEffect(() => {
    if (//some conditions) {
      client.stop();
      client.resetStore()
    }
  }, [callToReviewData]);

  return (
    // ...jsx
  )
}
...