Как я могу соответствующим образом импортировать часть контекста в этот фрагмент кода?

В настоящее время я получаю неверную ошибку вызова ловушки.

Я попытался поместить его в функциональный компонент, но затем у меня есть проблемы с клиентом Apollo …

Я запускаю next.js с клиентом apollo.

// клиентский код 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 {amp}amp; node-fetch for client {amp}amp; server. uri: GRAPHQL_URL }); const authLink = setContext((_, { headers }) ={amp}gt; { const {token} = useContext(AuthContext)//this causes an invalid hook call return { headers: { ...headers, authorization: token ? `Bearer ${token}` : "", } } }); export default withApollo( ({ initialState }) ={amp}gt; new ApolloClient({ link: authLink.concat(link), cache: new InMemoryCache() .restore(initialState || {}) }) ); 

// извлечение из _app.js показать провайдера на месте …

 {amp}lt;AuthContextProvider{amp}gt; {amp}lt;ApolloProvider client={apollo}{amp}gt; {amp}lt;NavBar /{amp}gt; {amp}lt;Component {...pageProps} /{amp}gt; {amp}lt;/ApolloProvider{amp}gt; {amp}lt;/AuthContextProvider{amp}gt;;