Отправка данных между сервером GraphQL Node.js и React в Nx

Question

Я настраиваю два проекта, Node.js и React в Nx monorepo. Я хотел бы использовать GraphQL для общения. Проекты, которые я выполняю с командой nx serve api(Node.js) и nx serve totodile(Реагировать). Проблема в том, что React не может получить доступ к данным с конечной точки.

React работает http://localhost:4200/.
Node.js работает на http://localhost:3333/.

Часть Node.js

Согласно инструкциям GraphQL для Node.js я запускаю сервер Node.js. Я создал две конечные точки и.

      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"
  }
}

Реагировать часть

Внутри функционального компонента я получаю с помощью и . Первый возвращает действительные данные, но / graphql возвращает 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умеет возвращать любые данные. Почему на обоих портах?
Что мне делать, чтобы поделиться данными из /graphql реагировать?

Answer 1

Чтобы исправить проблему, нужно было сделать 2 шага:

1. В React я должен получить с конечной точки с портом fetch('http://localhost:3333/graphql',(...))
2. В 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,
}));

...