Как я могу перейти от создания одного клиента apollo в каждом компоненте к повторному использованию одного и того же клиента в приложении? - PullRequest
Новая
       8

Как я могу перейти от создания одного клиента apollo в каждом компоненте к повторному использованию одного и того же клиента в приложении?

0 голосов
/ 02 октября 2018

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

const username = getUsername();
const jwtToken = yield call(getJwtToken, username);

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

Но я хочу просто создать одного клиента, чтобы я мог использовать кеш.Я думаю что-то вроде этого:

index.tsx 

import { ApolloProvider } from 'react-apollo';
import { createApolloClient } from './apollo';
const apolloClient = createApolloClient();
...
    return (
        <ApolloProvider client={apolloClient}>
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <ScrollToTop>
                        <App />
                    </ScrollToTop>
                </ConnectedRouter>
            </Provider>
        </ApolloProvider>
    );

apollo / index.tsx 

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { getUsername, getJwtToken } from '../model/user';
import { getGraphqlEndpointUrl } from '../model/aws';

const httpLink = createHttpLink({
    uri: getGraphqlEndpointUrl,
});

const authLink = setContext((_, { headers }) => {
    const username = getUsername();
    if (username) {
        getJwtToken(username).then(function(jwtToken: string) {
            return {
                headers: {
                    ...headers,
                    authorization: jwtToken,
                }
            };
        });
    }
});

function createApolloClient() {
    const client = new ApolloClient({
        link: authLink.concat(httpLink),
        cache: new InMemoryCache()
    });

    return client;
}

export { createApolloClient };

Теперь у меня есть несколько вопросов:

  • В сагах, где я ранее создал клиента, как теперь я могу ссылаться на клиента?
  • Код apollo/index.tsx выглядит правильно?
...