如何将 react-native / expo 与 Apollo 客户端的持久缓存一起使用？

如何解决如何将 react-native / expo 与 Apollo 客户端的持久缓存一起使用？

我想在我的 expo/react-native 应用程序中本地存储数据。我有一个 GraphQL 端点，我从中使用数据，但我想为每个用户在本地存储数据。

我不知道如何初始化我的客户端并使用 async/await 配置存储持久性。

// app.tsx
export default async function App() {

  const cache = new InMemoryCache();

  const client = new ApolloClient({
    uri: 'https://48p1r2roz4.sse.codesandBox.io',cache
  });
  
  await persistCache({
    cache,storage: AsyncStorage
  })

  return (
    <ApolloProvider client={client}>
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    </ApolloProvider>
  );
}

在此示例中使用 async / await 会导致 expo 失败，因为这是 app.tsx 组件，而且 react-native 似乎不会异步调用它。

我尝试过设置这样的加载状态：

export default function App() {

  const [isLoading,setLoading] = useState(true);
  
  const cache = new InMemoryCache();

  const client = new ApolloClient({
    uri: 'https://48p1r2roz4.sse.codesandBox.io',cache
  });
  
  persistCache({
    cache,storage: AsyncStorage
  }).then(() => {
    setLoading(false)
  })
  
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete || isLoading) { 
    return null;
  } else {
    return (
      <ApolloProvider client={client}>
        <SafeAreaProvider>
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
        </SafeAreaProvider>
      </ApolloProvider>
    );
  }
}

这是正确的设置方式吗？必须手动处理加载状态并使用 .then() 语法似乎很奇怪。