External graphql server?

[Rohit-cheddr]

How could I go about connecting to an external graphql server in production? I can see in the development configuration that I just need to change the proxy to point to the external graphql url, but how would I do it in production? Here's what I have so far:

index.js
...
if (config.env === 'development') {
  // Launch Relay by using webpack.config.js
  const relayServer = new WebpackDevServer(webpack(webpackConfig), {
    contentBase: '/build/',
    proxy: {
      '/graphql': config.externalUrl
    },
    stats: {
      colors: true
    },
    hot: true,
    historyApiFallback: true
  });

  // Serve static resources
  relayServer.use('/', express.static(path.join(__dirname, '../build')));
  relayServer.listen(config.port, () => console.log(chalk.green(`Relay is listening on port ${config.port}`)));
} else if (config.env === 'production') {
  // Launch Relay by creating a normal express server
  const relayServer = express();
  relayServer.use(historyApiFallback());
  relayServer.use('/', express.static(path.join(__dirname, '../build')));
  relayServer.use('/graphql', graphQLHTTP({ schema }));
  relayServer.listen(config.port, () => console.log(chalk.green(`Relay is listening on port ${config.port}`)));
}

[lvarayut]

Thanks for your question. If you're using external GraphQL server, you can set up Relay to send request directly to the server by putting the following code inside client/index.js:

// client/index.js
Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer(config.externalUrl)
);

Moreover, you could also completely delete our internal GraphQL endpoint in the server/index.js.

[Rohit-cheddr]

Gotcha! That's working. Thanks!

[Rohit-cheddr]

Gotcha! That's working. Thanks!

[nsuthar0914]

@Rohit-cheddr @lvarayut what happens to schema.json provided to babel-relay-plugin. Do we need to keep a copy of schema.js on the client and updateSchema locally?

[lvarayut]

Hi @nsuthar0914, I wouldn't keep a copy of schema.js. I would, however, write a script to automatically generate the schema.json from the external graphql server, here is an example of the script:

/* eslint-disable no-console */
import fetch from 'node-fetch';
import chalk from 'chalk';
import path from 'path';
import fs from 'fs';

async function fetchSchema(url) {
  try {
    const res = await fetch(url);
    const schema = await res.json();
    fs.writeFileSync(path.join(__dirname, '../data/schema.json'), JSON.stringify(schema, null, 4));
  } catch (err) {
    console.error(chalk.red(err.stack));
  }
}

fetchSchema('http://your_endpont.com/graphql/schema');

[toobulkeh]

@lvarayut -- is this supported by default on graphql? Or does the __schema need to be added to the backend somehow?

I'm using a custom Laravel GraphQL implementation, as well as an implementation from graphcool (for learnrelay.com).

Thanks!

[lvarayut]

Hey @toobulkeh, not sure if I understand your question correctly, but normally, we don't need to manually manage the __schema by ourselves.

[toobulkeh]

Unfortunately your script above didn't work for me, as it couldn't verify the schema

This library worked well for me, as a starter script in package.json:

"fetch": "./node_modules/.bin/fetch-graphql-schema https://api.graph.cool/relay/v1/asdj123kjas -o server/data/schema.json",