клиент apollo, возвращающий неопределенное значение при начальной перезагрузке в реагировать на натив - PullRequest
Новая
       28

клиент apollo, возвращающий неопределенное значение при начальной перезагрузке в реагировать на натив

3 голосов
/ 13 января 2020

Я пытаюсь получить некоторые данные из моего кэша. При первоначальной перезагрузке данные prop возвращают неопределенное значение, но если я быстро перезагружаю приложение (реагирую на собственную быструю перезагрузку), данные пропа получают желаемое значение. Я не могу понять, почему он возвращает неопределенный при первоначальной перезагрузке. Одним из случаев может быть то, что я вызываю запрос до инициализации кэша. Я утешил локальный кеш, и он показывает значения, но запрос переназначается не определено.

Настройка моего клиента в клиенте. js

const dev = {
  base_url: BASE_URL
};

const httpLink = createHttpLink({
  uri: dev.base_url
});

const errorLink = onError(({ graphQLErrors, networkError, response }) => {
  if (graphQLErrors) {
    // do something with graphql error
    console.log(graphQLErrors);
  }
  if (networkError) {
    // do something with network error
    console.log(networkError);
    // console.log('network not available');
  }
  if (response) {
    console.log(response);
  }
});
const cache = new InMemoryCache();

const setupPersistedCache = async () => {
  const persistor = new CachePersistor({
    cache,
    storage: AsyncStorage
  });

  // Read the current schema version from AsyncStorage.
  const currentVersion = await AsyncStorage.getItem(SCHEMA_VERSION_KEY);

  console.log('currentVersion', currentVersion);

  if (currentVersion && currentVersion === SCHEMA_VERSION) {
    // If the current version matches the latest version,
    // we're good to go and can restore the cache.
    console.log('not migrating cache');
    await persistor.restore();
  } else {
    // Otherwise, we'll want to purge the outdated persisted cache
    // and mark ourselves as having updated to the latest version.
    console.log('migrating cache');
    await persistor.purge();
    await AsyncStorage.setItem(SCHEMA_VERSION_KEY, SCHEMA_VERSION);

    cache.writeData({
      data: {
        ...initialState
      }
    });

    await persistCache({
      cache,
      storage: AsyncStorage,
      debug: true
    });
  }
  // console.log(cache.data);
};

setupPersistedCache();

const link = ApolloLink.from([errorLink, httpLink]);

const client = new ApolloClient({
  defaults: initialState,
  link,
  cache,
  resolvers
});

export default client;

My initialState. js

export default {
  language: 'bd'
};

Мой индекс. js

const AppProvider = () => {
  const [loaded, setLoaded] = useState(false);

  const configureCache = async () => {
    try {
      const cache = new InMemoryCache();
      await persistCache({
        cache,
        storage: AsyncStorage,
        debug: true
      });
      console.log(cache.data);
    } catch (error) {
      console.error('Error restoring Apollo cache', error);
    }
  };

  useEffect(() => {
    configureCache()
      .then(() => {
        setLoaded(true);
      })
      .catch(() => {
        setLoaded(false);
      });
  }, []);
  useEffect(() => {
    SplashScreen.hide();
  }, []);

  return (
    <>
      {loaded ? (
        <ApolloProvider client={client}>
          <Root />
        </ApolloProvider>
      ) : (
        <View style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center'
        }}
        >
          <TextComponent
            content="Loading"
            size={fonts.fs24}
            family={fonts.medium}
            color={colors.white}
          />
        </View>
      )}
    </>
  );
};

AppRegistry.registerComponent(appName, () => AppProvider);

Мой запрос 

export const getLangQuery = gql`
  query getLang {
    language @client
  }
`;

Я пытаюсь получить такие данные на моей странице root. 

const { loading, error, data } = useQuery(getLangQuery);
  const [setLanguage, result] = useMutation(setLangQuery);

  const language = data;
  console.log(language);

Ответы [ 2 ]

2 голосов
/ 14 января 2020

Я сам разбираюсь. Я инициализировал persistCache несколько раз. Однажды в клиенте. js и один раз в индексе. js. Вот почему он вел себя странно. Теперь все ведет себя как ожидалось.

2 голосов
/ 13 января 2020

data всегда изначально не определено, даже если результат выбирается из кэша, а не с сервера. Как только данные загружены, они сохраняются в состоянии компонента, поэтому, даже если компонент перезапускается, данные не должны извлекаться из кэша снова. Fast Refre sh просто запускает повторное отображение - оно не перезагружает все ваше приложение - поэтому любое состояние компонента, включая data в этом случае, сохраняется.

...