如何在GraphQL Relay中捕获查询的响应

编程问答 2022-06-12

问题描述

我是新手，我有一个传递响应的查询，可以在检查器的“网络”选项卡中看到该查询，但是我不了解的是如何获取该响应以在组件中使用。有人可以解释一下吗？

我的查询是

const query = graphql`
query AdvisorProfileQuery($id: ID!) {
    node(id: $id) {
        ...on Advisor {
            name
            postalCode
            products
            referralCode
            status
            updatedAt
        }
    }
}`;

并运行渲染器

const QueryRenderer = LoadingQueryRenderer(AdvisorProfile,query);
export default ({ i18n }) => {
return (
    <>
        <QueryRenderer
            params={{ id: id }}
        />
    </>
);
};

但是保存返回到组件的数据的变量名称是什么？我想将该数据作为道具传递给另一个组件。

这是响应的外观

relay response

解决方法

您可以按照official docs

中的示例进行操作 
import React from 'react';
import { QueryRenderer,graphql } from 'react-relay';
 
const Example = (props) => {
  return (
    <QueryRenderer
      environment={environment}
      query={graphql`
        query ExampleQuery($pageID: ID!) {
          page(id: $pageID) {
            name
          }
        }
      `}
      variables={{
        pageID: '110798995619330',}}
      render={({ props }) => {
        if (props) {
          return <ChildComponent page={page.name} />;
        }
        return <div>Loading</div>;
      }}
    />
  );
}

您可以像平常的道具一样使用QueryRenderer渲染内部的数据

graphqlgraphqlreactjsreactjsreactjsreactjsrelayjs