在通过appsync使用nextjs-auth0进行身份验证时遇到问题

时间:2020-01-27 01:11:11

标签: react-hooks apollo next.js auth0 aws-appsync

我正在使用以下ClientSetup.js来获取进行@ apollo / react-hooks调用的凭据。

该项目是RSUI,Appsync,Nextjs,Auth0(使用nextjs-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

0 个答案:

没有答案
相关问题