如何使用Relay发送一次性查询?

时间:2017-11-01 15:49:02

标签: javascript reactjs graphql relayjs

我正在尝试使用Relay发送一次性查询。所以,我不一定要使用QueryRenderer,而是使用一个简单的API来发送查询而不将结果绑定到React组件。

以前,使用fetch上的network方法可以实现这一点:

const checkVoteQueryText = `
  query CheckVoteQuery($userId: ID!, $linkId: ID!) {
    viewer {
      allVotes(filter: {
        user: { id: $userId },
        link: { id: $linkId }
      }) {
        edges {
          node {
            id
          }
        }
      }
    }
  }`
const checkVoteQuery = { text: checkVoteQueryText }
const result = await this.props.relay.environment._network.fetch(checkVoteQuery, {userId, linkId})

然而,似乎在某些较新版本的Relay中已弃用fetch。有没有可以现在使用的替代方案?

如果Relay不允许一次性查询,我可能只需要graphql-request或普通的JS fetch来完成工作。但是能够使用Relay会很好,因为它已经知道了我的终点。

1 个答案:

答案 0 :(得分:0)

啊实际上这很容易实现。实际上,在fetch上调用this.props.relay.environment._network只会重用在创建时传递给Network的函数。所以,可以重用这个函数,在我的例子中它被称为fetchQuery

Environment.js

import {GC_AUTH_TOKEN} from './constants'
import { SubscriptionClient } from 'subscriptions-transport-ws'

const {
  Environment,
  Network,
  RecordSource,
  Store,
} = require('relay-runtime')

const store = new Store(new RecordSource())

// Export it here so it can be reused in other files
export const fetchQuery = (operation, variables) => {
  return fetch('https://api.graph.cool/relay/v1/cj9h5g99s24fb0100nsp81d4y', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem(GC_AUTH_TOKEN)}`
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then(response => {
    return response.json()
  })
}

const network = Network.create(fetchQuery)

const environment = new Environment({
  network,
  store,
})

export default environm

耳鼻喉科