Apollo-server: Variables Passed to renderGraphiQL Are Occluded by Default Assignment

[hansef]

Using graphiqlExpress specifically here, but Hapi and Koa all have the same issue as well:

• https://github.com/apollostack/graphql-server/blob/master/packages/graphql-server-express/src/expressApollo.ts#L161
• https://github.com/apollostack/graphql-server/blob/master/packages/graphql-server-hapi/src/hapiApollo.ts#L227
• https://github.com/apollostack/graphql-server/blob/master/packages/graphql-server-koa/src/koaApollo.ts#L127

Given an invocation like this:

const initialQuery = `query exampleQuery ($name: String!) {
  person(name: $name) {
    id
    name
  }
}`;

const initialVariables = { name: 'Joe Bob' };

app.use('/graphiql', graphiqlExpress({
  endpointURL: '/graphql',
  query: initialQuery,
  variables: initialVariables,
}));

... your variables will never be used.

This is because an initial assignment is made inside of graphiqlExpress, etc, of:

const variables = q.variables || '{}';

And then renderGraphiQL is invoked with:

variables: JSON.parse(variables) || options.variables,

Because variables will always be an empty object if you didn't pass variables in the query string, options.variables will never be provided.

[helfer]

@hansef Good catch! Could you make a PR to fix it!? 🙂

[hansef]

Yep, will hit it shortly. 😉

[helfer]

@hansef how shortly is "shortly"? :wink:

[cdidyk]

Hi guys, coworker of @hansef here. I'm having some problems setting my local environment up sufficiently for what should be an easy fix.

I forked graphql-server and followed the instructions of npm link'ing it into another app. I picked https://github.com/apollostack/frontpage-server, figuring it should be easily amenable. I made some modifications to support this bug scenario (https://github.com/cdidyk/frontpage-server/tree/query-posts-with-variables), but another coworker using frontpage-server master got the same problem I'm about to describe.

graphiql for frontpage-server works fine if I npm install and thus use the version of graphql-server-express from npm. However, if I npm link in my local version of graphql-server-express, graphiql gives me the dreaded "Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory." error message. I can view /schema and it looks ok. I can console.log it and it looks ok and of the correct type. I also don't see any extra versions of graphql in node_modules.

Any idea what might be going on? Or is there a more preferable sample app setup? I'm grateful for any help/insight you can provide.