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

Posted

技术标签:

【中文标题】如何在 GraphQL Relay 中捕获查询的响应【英文标题】:How to capture the response of a query in GraphQL Relay 【发布时间】:2021-01-11 20:48:06 【问题描述】:

我是新来的中继,我有一个提供响应的查询,我可以在检查器的网络选项卡中看到,但我不明白如何获取该响应以在我的组件中使用。有人可以解释一下吗?

我的查询是

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

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

这就是响应的样子

【问题讨论】:

【参考方案1】:

您可以按照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 渲染中的数据

【讨论】:

以上是关于如何在 GraphQL Relay 中捕获查询的响应的主要内容,如果未能解决你的问题,请参考以下文章

中继/ graphql:可为空的响应或捕获查询错误的方法

如何在 GraphQL (Relay) 中查询和改变数组类型?

如何避免在 Relay.createcontainer 内置的 graphql 查询中添加额外的字段?

React GraphQL Relay - 如何进行简单查询?

如何使用 GraphQL 联合实现 Relay 节点查询

如何在 Relay 中捕获和处理失败的突变?