How do I combine both environments for Relay Modern?

Question

There's an example of injecting NetworkLayer with middlewares on the client side for Relay Modern that includes the following lines:

const network = new RelayNetworkLayer([...])

On the other hand, my current setup were taken from here and include the following:

function fetchQuery(
  operation,
  variables
) {
  return fetch('/graphql', {
    method: 'POST',
    credentials: 'same-origin', // 启用 cookie
    headers: {
      'Content-Type': 'application/json',
    }, // Add authentication and other headers here
    body: JSON.stringify({
      query: operation.text, // GraphQL text from input
      variables,
    }),
  }).then(response => {
    return response.json()
  })
}

const network = Network.create(fetchQuery)

How can I combine both into a single object network (is there a special constructor or something like that)?

I'd like to have a support for both middlewares and the query as well.

Answer 1

Just use react-relay-network-modern

This should work same as your fetchQuery function:

import { urlMiddleware, RelayNetworkLayer } from 'react-relay-network-modern'

const network = new RelayNetworkLayer([
  urlMiddleWare({
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    }
  })
])