Как я могу получить для каждого клиента Apollo для создания динамических маршрутов ящиков (React Navigation)?

Question

Я не могу использовать 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
  }
};

Теперь я хочу динамически создать drawerRoutes после запроса клиента Apollo. Но мне не удалось получить доступ к клиенту внутри createDrawerNavigator. Также я не могу передать что-то до createDrawerNavigator. Есть хитрый способ сделать это? Лучше всего было бы создать drawerRoutes в шаге 1. затем передать объект маршрута к шагу 3.

Когда я помещаю создание клиента Apollo, создание React Navigation Drawer и все в одном файле, оно работает. Но файл становится грязным.

Кто-нибудь может помочь? Вам нужна дополнительная информация?

Answer 1

Я еще не проверил это, но кажется, что ApolloConsumer - это способ доступа к client в дочерних компонентах ApolloProvider:

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

Answer 2

Если я правильно понимаю, вам просто нужно экспортировать свой клиент apollo и импортировать его туда, где он вам нужен, например:

// ApolloClient.js

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

// WhereYouNeedClient.js

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