使用 ApolloClient 从 useContext 钩子导入一个简单的变量 [英] Importing a simple variable from the useContext hook using ApolloClient

问题描述

我对 React 比较陌生，似乎无法从上下文中导入 client 变量.我有一个名为 federation.tsx 的文件，其中包含一些代码，我认为这应该是相关部分:

const link = createHttpLink({uri:process.env.URL，});const useApolloClient = (user: User | null) =>{const authLink = setContext((_, { headers }) => {返回 {标题:{...标题，授权:user?.idToken ||",},};});返回新的 ApolloClient({链接:authLink.concat(任何链接)，缓存:缓存，名称:测试"，版本:process.env.ANOTHER_URL，});};export const FederationProvider: React.FC = ({children}) =>{const [acc] = useContext(UserContext);const 客户端 = useApolloClient(acc);return <ApolloProvider client={client}>{children}</ApolloProvider>;};

我的主应用程序文件与上下文提供程序包装了所有相关内容:

function App() {返回 (
<FederationProvider><路由器><路线/></路由器></FederationProvider>
);}

以及我尝试使用它的文件:

import React, {useContext, useEffect} from "react";从...src"导入 {FederationProvider}；导出 const someComponent(() => {const [客户端] = useContext(FederationProvider);//不工作返回(<>...</>)})

谁能发现我可能做错的任何明显的事情?我不确定如何简单地导入客户端变量.

解决方案

从文档中，它说要使用通过 useApolloClient 钩子通过 ApolloProvider 配置的客户端像这样:-

const client = useApolloClient();

文档 - https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient

I'm relatively new to react and can't seem to import a client variable from a context. I have a file called federation.tsx with some code, where I believe this should be the relevant part:

const link = createHttpLink({
  uri: process.env.URL,
});

const useApolloClient = (user: User | null) => {
  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        Authorization: user?.idToken || "",
      },
    };
  });
  return new ApolloClient({
    link: authLink.concat(link as any),
    cache: cache,
    name: "Test",
    version: process.env.ANOTHER_URL,
  });
};

export const FederationProvider: React.FC = ({children}) => {
  const [acc] = useContext(UserContext);
  const client = useApolloClient(acc);
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

And my main app file with the context provider wrapping everything relevant:

function App() {
  return (
    <div className="App">
            <FederationProvider>
                  <Router>
                    <Routes/>
                  </Router>
            </FederationProvider>
    </div>
  );
}

And the file where I try to use it:

import React, {useContext, useEffect} from "react";
import {FederationProvider} from "..src";

export const someComponent(() => {
    const [client] = useContext(FederationProvider); // not working

    return (<>...</>)
})

Can anyone spot anything obvious that I may have done incorrectly? I'm not sure how to simply just import the client variable.

解决方案

From the docs, it says to use the client configured via a ApolloProvider by using the useApolloClient hook like so :-

const client = useApolloClient();

Docs - https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient

这篇关于使用 ApolloClient 从 useContext 钩子导入一个简单的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！