Javascript 如何从GraphQLAPI获取数据并将其传递给其他函数文件？

我正在尝试从GraphQLAPI获取数据，并将结果传递到另一个文件（在循环每个项目之前，我将在其中显示这些数据）

我尝试使用“client.query”检索数据，但不知道如何将结果传递到另一个文件。我尝试过使用导入，尝试过道具和挂钩，但仍然不起作用（我不知道我是否也做对了）

我的上一个计划是使用“useQuery”从文件1检索查询并将其传递到文件2，但我得到了“undefined”作为响应

请遵循以下代码：

文件1（提供程序）：

进口{
阿波罗客户，
阿波罗供应商，
从…起
HttpLink，
在记忆中，
gql
}来自“@apollo/client”；
从“@apollo/client/link/context”导入{setContext}”；
从“React”导入React，{FC}；
从“领域web”导入*作为领域；
require（'dotenv'）.config（）；
export const APP_ID=process.env.REACT_APP_REALM_APP_ID||；
常量图形url=`https://realm.mongodb.com/api/client/v2.0/app/${APP_ID}/graphql`；
const app=新领域.app（app_ID）；
异步函数getValidAccessToken（）{
const credentials=Realm.credentials.anonymous（）；
如果（！app.currentUser）{
等待应用程序登录（凭据）；
}否则{
等待app.currentUser.refreshCustomData（）；
}
返回app.currentUser？.accessToken；
}
const authLink=setContext（异步（{headers}:any）=>{
const tokenId=wait getValidAccessToken（）；
返回{
标题：{
…标题，
授权：tokenId？`Bearer${tokenId}`:“”，
},
};
});
const httpLink=新的httpLink({
uri:graphql_url，
});
const links=from（[authLink，httpLink]）；
const客户端=新客户端({
链接：链接，
缓存：新的InMemoryCache（），
});
导出常量APIProvider:FC=（{children}）=>{
返回{children}；
};
getValidAccessToken（）。然后（（）=>{
log（graphql_url，`Bearer${app.currentUser？.accessToken}`）；
});
//查询-10首次传输数据
export const Transfers_Data=gql`
{
转账（排序：预定转账日期，限额：10）{
付款人{
名称
}
接受者{
名称
}
预定转移日期
地位
价值
}
}
`;

文件2（index.tsx）：

从“bumbag”导入{Heading，styled}；
从“React”导入React，{FC}；
从“./Base”导入{PageWrapper}；
从“./Base/Footer”导入{Footer}；
从“./Base/Header”导入{Header}；
从“@apollo/client”导入{useQuery}；
从“../../API/Provider”导入{Transfers_Data}
const Page=styled.div`
背景色：#fe724e；
显示器：flex；
弹性：1；
弯曲方向：立柱；
`;
常量平衡条=styled.div`
对齐项目：居中；
显示器：flex；
证明内容：中心；
高度：100px；
边缘顶部：1米；
`;
const Balance=styled.div`
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
跨度{
颜色：#eaeaea；
字体大小：14px；
字体大小：粗体；
字母间距：0.05em；
线高：1米；
文本转换：大写；
}
h3{
字号：28px；
线高：1.33em；
保证金：0；
}
`;
const Content=styled.div`
背景色：#fff；
边框左上半径：12px；
边框右上角半径：12px；
盒影：0 8px 30px rgba（0,0,0,0.12）；
弹性：1；
`;
const ContentWrapper=styled.div`
高度：512px；
溢出y：自动；
填充：1.4em 1.25em；
`;
export const LastTransactionDiv=styled.div`
边缘顶部：15px；
高度：自动；
背景色：#fe724e；
边界半径：20px；
字体大小：14px；
颜色：白色；
填充：10px；
显示：网格；
网格模板列：2fr 1fr；
网格模板行：1fr 30px；
栅柱间隙：10px；
网格行间距：5px；
`;
export const Name=styled.p`
保证金：0；
填充顶部：10px；
`;
export const Value=styled.p`
保证金：0；
填充顶部：10px；
字体大小：粗体；
显示器：flex；
证明内容：柔性端；
`;
export const Date=styled.p`
保证金：0；
右侧填充：5px；
字体大小：12px；
显示器：flex；
证明内容：柔性端；
对齐内容：柔性端；
颜色：#d1d1；
`;
export const Status=styled.p`
保证金：0；
填充：0；
字体大小：12px；
显示器：flex；
调整内容：灵活启动；
对齐内容：柔性端；
颜色：#d1d1；
`;
导出常量主页：FC=（）=>{
const{loading，error，data}=useQuery（传输数据）；
控制台日志（数据+“ALOW”）；
返回(
萨尔多
R$4.215,50
阿尔蒂马斯交易会
{data.transfers.map（（tr:any）=>(
{tr.payer.name}
{tr.value}
{tr.status}
{tr.scheduled_transfer_date}
))}
);
};

尝试阅读有关React上下文的内容

---

React context允许您在整个应用程序中传递状态，这些状态可以保存从Api获取的数据，但在加载之前未定义这些数据<代码>如果（加载）返回在主返回之前。。如果内容提取到其他组件，则在内部测试，（渲染加载）保留渲染“布局”/模板

    import {
      ApolloClient,
      ApolloProvider,
      from,
      HttpLink,
      InMemoryCache,
      gql
    } from "@apollo/client";
    import { setContext } from "@apollo/client/link/context";
    import React, { FC } from "react";
    import * as Realm from "realm-web";
    require('dotenv').config();

    export const APP_ID = process.env.REACT_APP_REALM_APP_ID || "";
    const graphql_url = `https://realm.mongodb.com/api/client/v2.0/app/${APP_ID}/graphql`;

    const app = new Realm.App(APP_ID);

    async function getValidAccessToken() {
      const credentials = Realm.Credentials.anonymous();
      if (!app.currentUser) {
        await app.logIn(credentials);
      } else {
        await app.currentUser.refreshCustomData();
      }

      return app.currentUser?.accessToken;
    }

    const authLink = setContext(async (_, { headers }: any) => {
      const tokenId = await getValidAccessToken();
      return {
        headers: {
          ...headers,
          Authorization: tokenId ? `Bearer ${tokenId}` : "",
        },
      };
    });

    const httpLink = new HttpLink({
      uri: graphql_url,
    });

    const links = from([authLink, httpLink]);

    const client = new ApolloClient({
      link: links,
      cache: new InMemoryCache(),
    });

    export const APIProvider: FC = ({ children }) => {
      return <ApolloProvider client={client}>{children}</ApolloProvider>;
    };

    getValidAccessToken().then(() => {
      console.log(graphql_url, `Bearer ${app.currentUser?.accessToken}`);
    });

    //QUERY - 10 first transfers data
    export const Transfers_Data = gql`
      {
        transfers (sortBy:SCHEDULED_TRANSFER_DATE_DESC, limit: 10) {
          payer {
            name
          }
          recipient {
            name
          }
          scheduled_transfer_date
          status
          value
        }
      }
      `;

    import { Heading, styled } from "bumbag";
    import React, { FC } from "react";
    import { PageWrapper } from "../Base";
    import { Footer } from "../Base/Footer";
    import { Header } from "../Base/Header";
    import { useQuery } from "@apollo/client";
    import { Transfers_Data } from "../../API/Provider"

    const Page = styled.div`
      background-color: #fe724e;
      display: flex;
      flex: 1;
      flex-direction: column;
    `;

    const BalanceBar = styled.div`
      align-items: center;
      display: flex;
      justify-content: center;
      height: 100px;
      margin-top: 1em;
    `;

    const Balance = styled.div`
      align-items: center;
      display: flex;
      flex-direction: column;

      span {
        color: #eaeaea;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0.05em;
        line-height: 1em;
        text-transform: uppercase;
      }

      h3 {
        font-size: 28px;
        line-height: 1.33em;
        margin: 0;
      }
    `;

    const Content = styled.div`
      background-color: #fff;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      flex: 1;
    `;

    const ContentWrapper = styled.div`
      height: 512px;
      overflow-y: auto;
      padding: 1.4em 1.25em;
    `;

    export const LastTransactionDiv = styled.div`
    margin-top:15px;
    height:auto;
    background-color:#fe724e;
    border-radius:20px;
    font-size:14px;
    color:white;
    padding:10px;
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 30px;
    grid-column-gap:10px;
    grid-row-gap:5px;
    `;

    export const Name = styled.p`
    margin:0;
    padding-top:10px;
    `;
    export const Value = styled.p`
    margin:0;
    padding-top:10px;
    font-weight:bold;
    display:flex;
    justify-content:flex-end;
    `;
    export const Date = styled.p`
    margin:0;
    padding-right:5px;
    font-size:12px;
    display:flex;
    justify-content:flex-end;
    align-content:flex-end;
    color:#D1D1D1;
    `;

    export const Status = styled.p`
    margin:0;
    padding:0;
    font-size:12px;
    display:flex;
    justify-content:flex-start;
    align-content:flex-end;
    color:#D1D1D1;
    `;



    export const HomePage: FC = () => {
      const { loading, error, data } = useQuery(Transfers_Data);
      console.log(data + "ALOW");

      return (
        <PageWrapper>
          <Page>
            <Header>
              <BalanceBar>
                <Balance>
                  <span>Saldo</span>
                  <h3>R$ 4.215,50</h3>
                </Balance>
              </BalanceBar>
            </Header>
            <Content>
              <ContentWrapper>
                <Heading use="h4">Últimas transações</Heading>
                {data.transfers.map((tr: any) => (
                  <LastTransactionDiv key={tr._id}>
                    <Name>{tr.payer.name}</Name>
                    <Value>{tr.value}</Value>
                    <Status>{tr.status}</Status>
                    <Date>{tr.scheduled_transfer_date}</Date>
                  </LastTransactionDiv>
                ))}


              </ContentWrapper>
            </Content>
            <Footer />
          </Page>
        </PageWrapper>
      );
    };