如何获取每个 Apollo 客户端以创建动态抽屉路由（React Navigation）？答案

【问题标题】：How can I fetch per Apollo client to create dynamic drawer routes (React Navigation)?如何获取每个 Apollo 客户端以创建动态抽屉路由（React Navigation）？
【发布时间】：2019-10-11 01:34:53
【问题描述】：

我不能在我的导航项创建中使用client。

1.我创造了我的 Apollo 东西并返回

<ApolloProvider client={client}>
  <AppContainer />
</ApolloProvider>

2。 AppContainer 在单独的文件中

createAppContainer(AppDrawerNavigator)

3. AppDrawerNavigator 在单独的文件中

createDrawerNavigator(
  {
    HomeStack: {
      screen: HomeStackNavigator
    },
    ...drawerRoutes
  },
  {
    initialRouteName: 'HomeStack',
    drawerPosition: 'right'
  }
);

4. drawerRoutes 是硬编码对象

const drawerRoutes = {
  First: {
    screen: IndexStackNavigator
  },
  Second: {
    screen: IndexStackNavigator
  }
};

现在我想在查询 Apollo 客户端后动态创建drawerRoutes。但我没有设法访问createDrawerNavigator 内的客户端。我也不能将某些东西传递给createDrawerNavigator。有没有一种棘手的方法可以做到这一点？最好是在 1. 步骤中创建 drawerRoutes，而不是将路由对象传递给 3. 步骤。

当我将 Apollo 客户端创建、React Navigation Drawer 创建和所有内容放在一个文件中时，它就可以工作了。但是文件变得很乱。

有人可以帮忙吗？您需要更多信息吗？

【问题讨论】：

标签： react-native react-navigation react-apollo apollo-client

【解决方案1】：

如果我理解正确，您只需要导出您的 apollo 客户端并将其导入到您需要的任何地方，例如：

// ApolloClient.js

export const client = new ApolloClient({
  ...
});

// WhereYouNeedClient.js

import { client } from './ApolloClient'
...

【讨论】：

这种方式每次导入不都是一次又一次的新建吗？
显然有better的解决方案。

【解决方案2】：

我还没有检查它，但似乎ApolloConsumer 是访问ApolloProvider 的子组件中的client 的方式：

https://www.apollographql.com/docs/react/essentials/queries/#manually-firing-a-query

【讨论】：