如何從 GraphQL API 獲取數據並將其傳遞給其他函數文件？

Question

我正在嘗試從 graphql API 獲取數據並將結果傳遞給另一個文件（我將在循環每個項目之前顯示這些數據）。

我嘗試使用“client.query”檢索數據，但不知道如何將結果傳遞給另一個文件。 我嘗試使用導入，嘗試過道具和鈎子，但仍然無法正常工作（我不知道我是否也做得對）。

我的最后一個計划是使用“useQuery”從文件 1 中檢索查詢以將其傳遞給文件 2，但我收到“未定義”作為響應。

按照代碼：

文件 1（提供者）：

    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
        }
      }
      `;

文件 2 (index.tsx)：

    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>
      );
    };

Answer 1

嘗試閱讀 React Context 。

React 上下文讓您可以在整個應用程序中傳遞狀態，狀態可以保存從您的 Api 獲取的數據