时间戳

首页 > 解决方案 > 使用 Apollo Client 在 ReactJs 中的组件之间发送数据

javascript - 使用 Apollo Client 在 ReactJs 中的组件之间发送数据

问题描述

根据文档，GraphQl 提供了类似 Redux 的状态管理。我有 2 个组件。在Component1我使用 AppoloClient 从服务器获取数据时，它工作正常，并且Component2我想从cache（存储）读取数据。

//Component1
import React from "react";
import { gql, useQuery } from "@apollo/client";

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "EUR") {
      currency
    }
  }
`;

const Component1 = () => {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);
  console.log("component1", data);

  return <div>Component1</div>;
};

export default Component1;

//Component2
import React from 'react';
import {gql} from "@apollo/client";
import {client} from "./App";

const Component2 = () => {
    const info = client.readQuery({
        query: gql`
            query EXCHANGE_RATES {
                rates(currency: "EUR") {
                    currency
                }
            }
        `,
    });
    console.log('component2',info);
    return (
        <div>
          component2
        </div>
    );
};

export default Component2;

问题：我可以在组件 1 中获取数据，但是当我尝试从组件 2 中读取数据时，我得到undefined.
问题：如何解决这个问题，以便能够读取在组件 1 中获取的数据，在组件 2 中？此外，如何在 GraphQl 和 Apollo 客户端中传递一个对象，例如在缓存中，并在组件 1 中读取它（如 redux 功能）？
演示：https ://codesandbox.io/s/empty-sun-symv6?file=/src/App.js

标签： javascriptreactjsgraphqlapollo-client

解决方案

Apollo 提供客户端状态处理，可以设置为处理您的客户端站点状态，就像我们使用服务器端状态一样。

在您的示例中，这不是您想要的。最近，react 社区发生了一个明显的转变，即服务器端数据不应该存储在您选择的全局状态处理工具中。您的获取工具（在您的情况下为 apollo）应通过缓存响应来处理此问题。

为了解决您的问题，两个组件都使用完全相同的查询，您应该这样做。运行两次查询，让 apollo 处理缓存。因此，您可以将查询提取到查询文件中，或者只创建一个 userRates 挂钩并将其导入组件中，以更好地在组件之间共享逻辑。

要回答为什么您的方法不起作用，您必须了解您在缓存中的查找是在您的请求甚至完成之前发生的，并且此缓存查找不是“反应性的”。

编辑：我只是快速解决这个问题以提供一个起点，如果事情得到清理，可以稍后清理它。

推荐阅读