如何使用 Relay 发送临时查询？

Posted 2023-03-08

【中文标题】如何使用 Relay 发送临时查询？

【英文标题】：How to dispatch an ad-hoc query, with Relay?

【发布时间】：2016-03-07 08:08:04

【问题描述】：

我是 Relay 的新手，仍在努力解决它。根据我的理解，Relay 将查询与组件联系起来。这样，您可以说组件需要从 GraphQL 服务器提供 x、y 和 z。根据我的理解，官方的react-relay 库会在适当的时候发送这些查询，很可能是在组件即将被渲染的时候。

这一切对我来说都适用于直接的用例，例如简单地显示数据列表。

不过，我对如何做感到困惑的是，如何调度可能不完全属于与组件相关联的事物类别的查询。一种查询，例如尝试获取用户身份验证会话令牌或其他内容的查询。这是我目前的情况：我正在尝试创建一个从 GraphQL 获取会话令牌的用户登录表单。我有一个参数化的 GraphQL 字段，它需要用户名和密码参数，如果它们有效，将返回一个会话令牌。我只是不知道如何使用 Relay 来查询该会话令牌。

我基本上只需要调度一个查询，并处理响应（将该会话令牌放入 React 应用程序状态）。

有什么想法吗？

【问题讨论】：

我在询问了类似的 qn ***.com/questions/34346273/… 后发现了这个问题，看到您的 qn 没有任何回应令人失望。抄送@steveluscher

在遇到很多没有明确答案的问题和问题后，我决定暂时放弃 GraphQL 和 Relay。我回到了 Redux，只是一个典型的 HTTP RESTful API。我看到了很多关于 GraphQL 和 Relay 的好东西，但是有太多与临时查询（或如何使用 Relay 进行这种工作流程）以及用户授权类型的东西有关的问题，比如哪些字段应该对谁。它开始需要太多的服务器和客户端代码来处理向具有权限的用户显示某些特定字段。不过，我真的很喜欢其他一切。

感谢您的回复。

应该考虑重命名它以获得更好的 SEO。这是互联网的一颗隐藏的宝石。

【参考方案1】：

Relay 的 API 主要专注于简化为组件获取数据的过程，但 Relay 还支持即席查询。该 API 相对较低级，具有用于获取和读取数据的不同功能。以下是如何获取临时查询和访问响应的示例：

// Create a query with values for any variables:
var query = Relay.createQuery(Relay.QL`query ... `, var: 'value');
// Fetch any fields that have not yet been cached:
Relay.Store.primeCache(query, readyState => 
  if (readyState.done) 
    // When all data is ready, read the data from the cache:
    var data = Relay.Store.readQuery(query)[0];
    /* access fields on `data` */
  
);

如果数据不需要与 Relay 的缓存同步，您还可以使用纯网络请求（XHR、fetch 等）向您的 GraphQL 端点发送纯字符串查询。

【讨论】：

当您想确保从服务器获取最新数据时，您还可以使用 Relay.Store.forceFetch(query, readyStateCallback)

【参考方案2】：

老实说，使用单独的库可能是最简单的。我在我的node 项目中使用Lokka，它非常简单且可靠。

// config
const Lokka = require('lokka').Lokka;
const Transport = require('lokka-transport-http').Transport;

const client = new Lokka(
  transport: new Transport('http://graphql-swapi.parseapp.com/')
);



// query
client.query(`
  
    allFilms 
      films 
        ...$filmInfo
      
    
  
`).then(result => 
  console.log(result.allFilms.films);
);