Question

我是Relay的新手，仍然试图绕过它。根据我的理解，Relay将查询与组件联系起来。这样，您可以说需要从GraphQL服务器提供组件x，y和z。根据我的理解，官方react-relay库将在适当的时间发送这些查询，可能在组件即将呈现时。

对于直接用例，例如简单地显示数据列表，这对我来说都是有意义的。

但是，我对如何做的困惑是如何调度可能不属于与组件绑定的类别的查询。查询，例如尝试获取用户身份验证会话令牌或其他内容的查询。这是我目前的情况：我尝试创建一个从GraphQL获取会话令牌的用户登录表单。我有一个参数化的GraphQL字段，需要用户名和密码参数，如果它们有效，将返回一个会话令牌。我无法弄清楚如何使用Relay来查询该会话令牌。

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

有什么想法吗？

Answer 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端点发送纯字符串查询。

Answer 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);
});

如何使用Relay调度即席查询？

2 个答案: