apollo 客户端在 react native 的初始重新加载中返回 undefined

Question

我正在尝试从我的缓存中获取一些数据。在初始重新加载数据道具 returns 未定义但是如果我快速重新加载应用程序（反应本机快速重新加载）数据道具具有我想要的值。我不明白为什么它在初始重新加载时返回未定义。一种情况可能是我在缓存初始化之前调用查询。我已经安慰了本地缓存，它显示了值，但查询正在重新调整未定义。

我的客户端设置在 client.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;

我的initialState.js

export default {
  language: 'bd'
};

我的index.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
  }
`;

我正在尝试在我的根页面中获取这样的数据。

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

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

Answer 1

data 最初总是未定义的，即使结果是从缓存而不是服务器中获取的。加载数据后，它会保留在组件状态中，因此即使组件重新呈现，也不必再次从缓存中获取数据。快速刷新只会触发重新呈现——它不会重新加载你的整个应用程序——因此任何组件状态，包括本例中的 data，都会被保留。

Answer 2

我自己想办法。我在 client.js 中初始化 persistCache 倍数 time.Once，在 index.js 中初始化一次。这就是为什么它表现得很奇怪。现在一切都按预期运行。

apollo 客户端在 react native 的初始重新加载中返回 undefined

apollo client returning undefined in initial reload in react native

javascript

react-native

graphql

react-apollo

apollo-client