错误:未捕获的不变违反:commitRelayModernMutation:预期environment
是RelayModernEnvironment
的实例。
在同一应用程序中使用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;