Доступ к широкому клиенту приложения при использовании Redux?

Question

Я использую Redux для управления состоянием и Apollo для выполнения запросов graphQL.

Я создаю клиент Apollo, который должен быть доступен из различных компонентов React.

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const link = new HttpLink({
    uri: getGraphqlEndpointUrl,
    headers: {
        'x-api-key': getApiKey(),
        'Authorization': jwtToken,
    },
});
const client = new ApolloClient({
    link: link,
    cache: new InMemoryCache(),
});

Как мнесделать это с Redux?Хранить ли клиента в переменной в хранилище Redux?Это кажется немного странным, но не безосновательным.Есть ли лучший способ?

Answer 1

Только избыточно сериализуемые объекты должны храниться через избыточность - функции или объекты, которые имеют функции, так как свойства не принадлежат хранилищу избыточности.Если вам нужно сослаться на клиента Apollo вне иерархии компонентов вашего приложения React, просто создайте модуль, который экспортирует сам объект клиента (, а не функция, которая создает клиента).Затем вы можете просто импортировать клиент везде (включая код, включающий ваш ApolloProvider), и весь ваш код будет указывать на один и тот же экземпляр клиента (и тот же кеш).

Важно, чтобы модуль для вашегоклиент экспортирует сам экземплярный клиент - если вы экспортируете функцию, которая создает клиент, вы будете воссоздавать его каждый раз, когда импортируете его.