Я использую следующий ClientSetup. js для получения учетных данных для совершения вызовов @ apollo / реагировать на перехваты.
Проект представляет собой комбинацию RSUI, Appsyn c, Next js , Auth0 (с использованием следующего js -auth0).
import fetch from 'node-fetch'
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { setContext } from 'apollo-link-context';
import auth0 from './lib/auth0'
export default async function client(req, res) {
try {
const tokenCache = auth0.tokenCache(req, res);
const { accessToken } = await tokenCache.getAccessToken({});
const middlewareLink = setContext(() => ({
// headers: {
// 'X-Api-Key': process.env.APPSYNC_API_KEY
// }
headers: {
Authorization: `Bearer ${accessToken}`
}
}));
const httpLink = new HttpLink({
uri: process.env.APPSYNC_GRAPHQL_ENDPOINT,
fetch: fetch,
});
const link = middlewareLink.concat(httpLink);
const client = new ApolloClient({
link,
cache: new InMemoryCache(),
});
return client
} catch (error) {
console.error(error);
}
}
ClientSetup. js импортируется следующим образом:
import React from 'react';
import App, { Container } from 'next/app';
import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloHooksProvider } from '@apollo/react-hooks';
import client from '../ClientSetup'
import '../.semantic/dist/semantic.min.css';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
<ApolloProvider client={client}>
<ApolloHooksProvider client={client}>
<Container>
<Component {...pageProps} />
</Container>
</ApolloHooksProvider>
</ApolloProvider>
);
}
}
export default MyApp;
Короче говоря, я получаю следующую ошибку, и я хотел бы, чтобы это работало:
this.refreshClient(...).client.watchQuery is not a function