How to call a GraphQL query/mutation from an Express server backend? - express

Question

My frontend is localhost:3000, and my GraphQL server is localhost:3333.
I've used react-apollo to query/mutate in JSX land, but haven't made a query/mutation from Express yet.
I'd like to make the query/mutation here in my server.js.
server.get('/auth/github/callback', (req, res) => {
// send GraphQL mutation to add new user
});
Below seems like the right direction, but I'm getting TypeError: ApolloClient is not a constructor:
const express = require('express');
const next = require('next');
const ApolloClient = require('apollo-boost');
const gql = require('graphql-tag');
// setup
const client = new ApolloClient({
uri: 'http://localhost:3333/graphql'
});
const app = next({dev});
const handle = app.getRequestHandler();
app
.prepare()
.then(() => {
const server = express();
server.get('/auth/github/callback', (req, res) => {
// GraphQL mutation
client.query({
query: gql`
mutation ADD_GITHUB_USER {
signInUpGithub(
email: "email#address.com"
githubAccount: "githubusername"
githubToken: "89qwrui234nf0"
) {
id
email
githubToken
githubAccount
}
}
`,
})
.then(data => console.log(data))
.catch(error => console.error(error));
});
server.listen(3333, err => {
if (err) throw err;
console.log(`Ready on http://localhost:3333`);
});
})
.catch(ex => {
console.error(ex.stack);
process.exit(1);
});
This post mentions Apollo as the solution, but doesn't give an example.
How do I call a GraphQL mutation from Express server :3000 to GraphQL :3333?

Answer 1

This is more likely to be what you're looking for:
const { createApolloFetch } = require('apollo-fetch');
const fetch = createApolloFetch({
uri: 'https://1jzxrj179.lp.gql.zone/graphql',
});
// Example # 01
fetch({
query: '{ posts { title } }',
}).then(res => {
console.log(res.data);
});
// Example # 02
// You can also easily pass variables for dynamic arguments
fetch({
query: `
query PostsForAuthor($id: Int!) {
author(id: $id) {
firstName
posts {
title
votes
}
}
}
`,
variables: { id: 1 },
}).then(res => {
console.log(res.data);
});
Taken from this post, might be helpful to others as well: https://www.apollographql.com/blog/graphql/examples/4-simple-ways-to-call-a-graphql-api/

Answer 2

You can use graphql-request, it is a simple GraphQL client.
const { request } = require('graphql-request');
request('http://localhost:3333/graphql', `mutation ADD_USER($email: String!, $password: String!) {
createUser(email: $email, password: $password) {
id
email
}
}`, {email: 'john.doe#mail.com', password: 'Pa$$w0rd'})
.then(data => console.info(data))
.catch(error => console.error(error));
It also support CORS.
const { GraphQLClient } = require('graphql-request');
const endpoint = 'http://localhost:3333/graphql';
const client = new GraphQLClient(endpoint, {
credentials: 'include',
mode: 'cors'
});
client.request(`mutation ADD_USER($email: String!, $password: String!) {
createUser(email: $email, password: $password) {
id
email
}
}`, {email: 'john.doe#mail.com', password: 'Pa$$w0rd'})
.then(data => console.info(data))
.catch(error => console.error(error));
I use it to make E2E tests.

Answer 3

As you are getting ApolloClient with require instead of import I think you are missing this part:
// es5 or Node.js
const Boost = require('apollo-boost');
const ApolloClient = Boost.DefaultClient;
or
const ApolloBoost = require('apollo-boost');
const ApolloClient = ApolloBoost.default;
Try one of those and see if it works.

Answer 4

I'd like to add one more way to query from express.
This is what I ended up with.
install required packages
npm install graphql graphql-tag isomorphic-fetch
write graphql on separate file (myQuery.js)
const gql = require('graphql-tag');
const query = gql`
query($foo: String) {
// Graphql query
}
}
Main file
const { print } = require('graphql/language/printer');
const query = require('./myQuery');
require('isomorphic-fetch');
// other logic
const foo = "bar"
const token = "abcdef"
await fetch('https://example.com/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'authorization': `Bearer ${token}`,
},
body: JSON.stringify({
query: `${print(query)}`,
variables: { foo },
}),
})