在 GraphQL Node.js 服务器和 Nx 中的 React 之间发送数据

Question

我在 Nx monorepo 中设置了两个项目，Node.js 和 React。我想使用 GraphQL 进行通信。我的项目是运行命令 nx serve api(Node.js) 和 nx serve totodile (React)。问题是 React 无法从 /graphql 端点访问数据。

React 运行宁 http://localhost:4200/。
Node.js 运行宁 http://localhost:3333/。

Node.js部分

根据 GraphQL instructions for Node.js 我运行 Node.js 服务器。我创建了两个端点 /api 和 /graphql.

import * as express from 'express';
import { graphqlHTTP } from 'express-graphql';
import { Message } from '@totodile/api-interfaces';
import { buildSchema } from 'graphql';

const app = express();

const greeting: Message = { message: 'Welcome to api!' };

app.get('/api', (req, res) => {
  res.send(greeting);
});

app.use('/graphql', graphqlHTTP({
  schema: buildSchema(`
  type Query {
    hello : String
  }
`),
  rootValue: {
    hello: () => 'Hello world'
  },
  graphiql: true,
}));

const port = process.env.port || 3333;
const server = app.listen(port, () => {
  console.log('Listening at http://localhost:' + port + '/api');
});
server.on('error', console.error);

结果我能够连接到 http://localhost:3333/graphql 并收到响应。所以 graphql 服务器运行良好。

// graphql response
{
  "data": {
    "hello": "Hello world"
  }
}

反应部分

我使用 /api 和 /graphql 获取的内部功能组件。第一个return有效数据，但是/graphql是returning 404，不能POST/graphql .

  useEffect(() => {
    fetch('/api') // successfully return data
      .then((r) => r.json())
      .then(setMessage);  

    fetch('/graphql', { // 404, no data
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      body: JSON.stringify({query: "{ hello }"})
    })
      .then(r => r.json())
      .then(data => console.log('data returned:', data)); 
  }, []);

我调查了一下：

http://localhost:4200/api return valid data ("message": "Welcome to api!")
http://localhost:3333/api return valid data ("message": "Welcome to api!")

http://localhost:4200/graphql 404 no data
http://localhost:3333/graphql return valid data ("hello": "Hello world")

一定是有端口的东西
我不明白 /api 如何能够 return 任何数据。为什么在两个端口上？
我应该怎么做才能分享来自 /graphql 的数据以做出反应？

Answer 1

要解决问题，需要执行 2 个步骤：

在 React 中，我应该使用端口 fetch('http://localhost:3333/graphql',(...))
在Node.js中需要使用cors库

import express from "express";
import cors from 'cors';

const app = express();

app.use(cors());

app.use('/graphql', graphqlHTTP({
 schema: schema,
 rootValue: root,
 graphiql: true,
}));

...

在 GraphQL Node.js 服务器和 Nx 中的 React 之间发送数据

Send data between GraphQL Node.js server and React in Nx

javascript

node.js

reactjs

graphql

nx.dev

Node.js部分

反应部分