如何从Apollo设置上下文Http链接访问React上下文

我正在尝试为我的Apollo客户端访问setContext函数中的react上下文值。我希望能够使用react上下文值动态更新每个graphql请求的标头。但是我遇到一个错误,日志中没有可见的错误消息。我想做的事可能吗?

import React,{ useState,useContext } from "react";
import { render } from "react-dom";

import ApolloClient from "apollo-client";
import { ApolloProvider } from "react-apollo";
import { createHttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { InmemoryCache } from "apollo-cache-inmemory";

import Select from "./Select";
import CurrencyContext from "./CurrencyContext";
import ExchangeRates from "./ExchangeRates";

const httpLink = createHttpLink({
  uri: "https://48p1r2roz4.sse.codesandbox.io"
});

const authLink = setContext((_,{ headers }) => {

  const token = localStorage.getItem("token");


  const currency = useContext(CurrencyContext); // How to access React context here ?


  return {
    headers: {
      ...headers,authorization: token ? `Bearer ${token}` : "",currencyContext: currency ? currency : {}
    }
  };
});

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

const currencies = ["USD","EUR","BTC"];

const App = () => {
  const [currency,setCurrency] = useState("USD");

  return (
    <ApolloProvider client={client}>
      <CurrencyContext.Provider value={currency}>
        <h2>Provide a Query variable from Context ?</h2>
        <Select value={currency} setvalue={setCurrency} options={currencies} />
        <ExchangeRates />
      </CurrencyContext.Provider>
    </ApolloProvider>
  );
};

render(<App />,document.getElementById("root"));
tianlingling_2008 回答:如何从Apollo设置上下文Http链接访问React上下文

您可以使用useImperativeHandle从外部React树访问上下文值 在上下文文件中创建引用

export const ContextRef = React.createRef();

然后在上下文中添加

React.useImperativeHandle(ContextRef,() => contextValues);

最后,您可以使用来访问上下文值

 ContextRef.current.token

请参阅:https://reactjs.org/docs/hooks-reference.html#useimperativehandle

本文链接:https://www.f2er.com/2955292.html

大家都在问