Relay Modern - 如何在没有 fragmentContainer 的情况下使用 fetchQuery

Posted 2023-03-08

【中文标题】Relay Modern - 如何在没有 fragmentContainer 的情况下使用 fetchQuery

【英文标题】：Relay Modern - How to use fetchQuery without fragmentContainer

【发布时间】：2017-11-15 03:30:02

【问题描述】：

所以我正在为 React 应用程序与服务器端渲染进行中继。我正在尝试使用中继从 graphql 端点获取数据。

我有点关注this，使用fetchQuery 通过中继编译器从已编译的graphql 发出请求来获取数据。

例如

import  graphql, fetchQuery  from 'react-relay'

const query = graphql`
   query SomeQuery($id: ID) 
      author(id: $id) 
         name
         ...SomeFragment_authorData
      
   
`

const variables =  "id" : "1f" ;

fetchQuery(env, query, variables)
   .then((jsonData) =>  console.log(jsonData); )

当它完成运行时，它会给我某种对象：

  author: 
    __fragment:  ... 
    ...
  

我假设用createFragmentContainer() 包裹的子组件将使用它来获取真实数据。

由于我没有使用createFragmentContainer()，我不确定如何正确获取数据，有没有办法将上述响应转换为真实数据？ 任何帮助将不胜感激！

注意：

目前这是我获取数据的方法：env._network.fetch(query(), variables)。它正在工作，但我需要挖掘私有变量以获取我提供给Network 对象的fetch 似乎不正确。

【问题讨论】：

在您链接的文章中fetchQuery 是从relay-runtime 导入的，而不是react-relay。也许改变这种方式，您可以在响应中获得您期望的数据。

react-relay 正在从 relay-runtime 重新导出 fetchQuery

【参考方案1】：

您需要在片段传播中添加一个中继指令： ...SomeFragment_authorData @relay(mask: false)

【讨论】：

我能知道为什么吗？我不明白“@relay(mask: false)”

【参考方案2】：

您可以使用中继环境和中继运行时实用程序。

import 
  createOperationDescriptor,
  getRequest,
 from 'relay-runtime';


const request = getRequest(query);
const operation = createOperationDescriptor(request, variables);
environment.execute( operation ).toPromise();