未捕获的不变违规:commitRelayModernMutation:预期`environment`是`RelayModernEnvironment`的实例

时间:2019-03-12 09:28:03

标签: graphql relayjs relaymodern graphql-relay

错误:未捕获的不变违反:commitRelayModernMutation:预期environmentRelayModernEnvironment的实例。 在同一应用程序中使用Relay Modern和Relay Classic时,请确保使用Relay Compat的变体在两种环境中均可工作。

我为中继使用了不同的客户端和服务器设置。我在后端使用了“ graphql-relay-js”,而在前端使用了中继现代。

我对网络使用了简单的relay-runtime

import { SubscriptionClient } from "subscriptions-transport-ws";
import { Environment, Network, RecordSource, Store } from "relay-runtime";


import { getToken } from "./utils/jwt"

/**
 * Create store for relay connection
 */
export const store = new Store(new RecordSource());

/**
 * Load Environment Configuration
 */
const host = process.env.GRAPH_QL_HTTP_SERVER_HOST.toString()
const port = process.env.GRAPH_QL_HTTP_SERVER_PORT
const httpEndPointUrl = process.env.GRAPH_QL_HTTP_SERVER_URL
const wsEndPointUrl = process.env.GRAPH_QL_SUBSCRIPTION_SERVER_URL
const httpEndPoint = `http://${host}:${port}/${httpEndPointUrl}`
const socketEndPoint = `ws://${host}:${port}/${wsEndPointUrl}`



/**
 * Fetch query from relay server
 * @param {*} operation 
 * @param {*} variables 
 */
const fetchQuery = (operation, variables) => {
  return fetch(`${httpEndPoint}`, {
    method: "POST",
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json",
      "Authorization": getToken()
    },
    body: JSON.stringify({
      query: operation.text,
      variables
    })
  }).then(response => {
    return response.json();
  });
};

/**
 * Setup subscription server
 * @param {*} config 
 * @param {*} variables 
 * @param {*} cacheConfig 
 * @param {*} observer 
 */
const setupSubscription = (config, variables, cacheConfig, observer) => {
  const query = config.text;
  const { onNext, onError, onCompleted } = observer;
  const subscriptionClient = new SubscriptionClient(
    `${socketEndPoint}`,
    { reconnect: true }
  );
  subscriptionClient
    .request({ query, variables })
    .subscribe(onNext, onError, onCompleted);
};

/**
 * Initialize network with fetch query and subscription
 */
const network = Network.create(fetchQuery);

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

export default environment;

0 个答案:

没有答案