消费功能组件之外的上下文

Question

如何将一段上下文适当地导入此代码摘录中？

我当前收到无效的挂接调用错误。

我尝试将其放入功能组件中，但是后来我的阿波罗客户端出现了问题...

我正在运行带有阿波罗客户端的next.js。

// apollo客户代码

import {useContext } from "react"
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import withApollo from "next-with-apollo";
import { createHttpLink } from 'apollo-link-http';;
import fetch from "isomorphic-unfetch";
import {AuthContext} from "../contexts/AuthContext"

const GRAPHQL_URL = "http://localhost:3000/ql";

const link = createHttpLink({
  fetch, // Switches between unfetch & node-fetch for client & server.
  uri: GRAPHQL_URL
});

const authLink = setContext((_, { headers }) => {
  const {token} = useContext(AuthContext)//this causes an invalid hook call
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

export default withApollo(
  ({ initialState }) =>
    new ApolloClient({
      link: authLink.concat(link),
      cache: new InMemoryCache()
        .restore(initialState || {})
    })
);

//从_app.js的显示提供程序中提取到位...

<AuthContextProvider>
  <ApolloProvider client={apollo}>
    <NavBar />
    <Component {...pageProps} />
  </ApolloProvider>
</AuthContextProvider>;