Sunday, 23 April 2017

Trouble Resolving GraphQL Express-GraphQL Endpoint with Apollo Client and Proxy Config

I'm attempting to connect to an Express-GraphQL endpoint in a Create-React-App using Apollo Client with a custom proxy config for development. I receive the following error: enter image description here.

Apollo Client Network Interface:

 import {ApolloProvider, ApolloClient, createNetworkInterface} from 'react-apollo';
    import './index.css';

    const client = new ApolloClient({
  networkInterface: createNetworkInterface({
  uri:"http://localhost:8080/graphql",
}),
  connectToDevTools: true
});

Express Server / GraphQL Server

const graphqlHTTP = require('express-graphql');
const app = express();

app.use('/graphql', graphqlHTTP(request =>{
   return {
   schema: schema,
   graphiql: true,
   rootValue: root
} }));
let server;
function runServer(dbUrl, host, port=3001) {
  return new Promise((resolve, reject) => {
    mongoose.Promise = global.Promise;
    mongoose.connect(dbUrl, err => {
      if (err) {
        return reject(err);
      }
      server = app.listen(port, host, () => {
        console.log(`Your app is listening on port ${port}`);
        resolve();
      })

The Proxy (With http-proxy-middlewear)

const express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();
const runServer = require('./server').runServer;

const app = express();
    // Proxy everything through to Create React App
    app.use(proxy('http://localhost:3000/', {
        logLevel: 'warn', // Keep the logs clean
        ws: true, // Proxy websockets too
        router: {
            // Anything to /api goes to our backend
            'http://localhost:8080/graphql': 'http://localhost:3001/',
        }
    }));

Top Level package.json aka The Reason (3 package.json's for client, server, and top level)

"scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd client && npm install --only=dev && npm run build",
    "dev": "run-p dev:server dev:client start",
    "dev:client": "cd client && cross-env BROWSER=none npm start -- --color=always | xp http://localhost:3000/ http://localhost:8080/",
    "dev:server": "cd server && npm start",
    "install": "run-s install:server install:client",
    "install:server": "cd server && npm install",
    "install:client": "cd client && npm install"
  },



via Zach_is_my_name

No comments:

Post a Comment