Demander à l'API Graphql en cours d'exécution sur un port différent à partir de l'application Next.js en mode développement localhost

Question

Je suis actuellement en train de passer mon application existante de create-react-app à next.js, tout semble fonctionner correctement sauf mon point de terminaison d'API fonctionnant sur une autre application node sur le port 4000, auquel je ne peux pas accéder depuis mon application next.js. J'ai suivi les exemples du dépôt mais je n'arrive pas à le faire fonctionner, En production j'utilise nginx comme proxy inversé sans problème, mais je suis en mode développement. Pour configurer Apollo avec Redux, j'ai suivi cet exemple : with-apollo-and-redux et pour le proxy j'ai utilisé cet exemple with-custom-reverse-proxy

Je sais que je fais quelque chose de mal, je n'arrive juste pas à le comprendre pour le moment

dans initApollo.js

...    
function create() {
      return new ApolloClient({
        ssrMode: !process.browser,
        networkInterface: createNetworkInterface({
          uri: "/api" 
        })
      });
    }
...

dans server.js

...    
const devProxy = {
      "/api/": {
        target: "http://localhost:4000/api/",
        changeOrigin: true
      }
    };

    app
      .prepare()
      .then(() => {
        const server = express();

        if (dev && devProxy) {
          const proxyMiddleware = require('http-proxy-middleware')
          Object.keys(devProxy).forEach(function (context) {
            server.use(proxyMiddleware(context, devProxy[context]))
          })
        }

        server.all("*", (req, res) => handle(req, res));

        server.listen(3000, err => {
          if (err) throw err;
          console.log("> Prêt sur http://localhost:3000");
        });
      })
      .catch(ex => {
        console.error(ex.stack);
        process.exit(1);
      });

Answer 1

Ok j'ai enfin trouvé le problème qui N'EST PAS lié à Next.js ou Apollo client. mais plutôt à mon serveur fonctionnant sur le port 4000 (mon serveur graphql). J'ai dû faire face à CORS, et au middleware express express-graphql qui je pense n'est pas pris en charge par défaut.

donc j'ai ajouté ce qui suit à mon serveur exécutant graphql

app.use("/api", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, Content-Length, X-Requested-With"
  );
  if (req.method === "OPTIONS") {
    res.sendStatus(200);
  } else {
    next();
  }
});

et aussi dans le client apollo j'ai dû mettre le chemin absolu vers mon serveur api

networkInterface: createNetworkInterface({
      uri: "http://localhost:4000/api/"
    })

c'est tout