Importing Remote GraphQL Schema into Gridsome

const { setContext } = require('apollo-link-context');
const { HttpLink } = require('apollo-link-http');
const { introspectSchema, makeRemoteExecutableSchema } = require('graphql-tools');
const fetch = require('node-fetch');

module.exports = function(api) {
  api.createSchema(async function(graphql) {
    const http = new HttpLink({
      uri: 'http://example.com/api',
      fetch
    });

    const link = setContext((request, previousContext) => ({
      headers: {
        Authorization: `Bearer JSmxi5ocIhjKGENvgK66TrlqoylAPy8ZeAckiyo-4txKkYhdKSfLlPXLnxoghZm3`
      }
    })).concat(http);

    const schema = await introspectSchema(link);
    const executableSchema = await makeRemoteExecutableSchema({
      schema: schema,
      link
    });

    return executableSchema;
  });
};

I have a Page type in my remote graphql schema (Wordpress wp-graphql) and gridsome won't allow that schema to import into it because it has it's own Page type. I get
Error: Schema must contain uniquely named types but contains multiple types named "Page".
Kindly help.

Can either of the content type be removed or renamed?
Or
Can the remote schema being imported be assigned a FieldType or TypeName that somehow resolves this issue?

I see that Transform can be used to rename the new conflicting type as described in this article (https://www.graphql-tools.com/docs/schema-wrapping/). But I'm unsure where and how to put the code for it in the above gist as I do not understand TypeScript used in the documentation.

Renaming Types and RootFields section of this article (https://medium.com/hasura/the-ultimate-guide-to-schema-stitching-in-graphql-543ebcb25d42) resolved my issue.

Note: I did not use @gridsome/source-graphql plugin because it has limitations and the graphql query wont work inside api.loadSource() in gridsome.server.js

Hi, this looks great but I'm having trouble in the shape of this error:

TypeError: gridsome.server.js: executor is not a function (50:26)

  48 |     })).concat(http);
  49 |
> 50 |     const schema = await introspectSchema(link);
     |                          ^
  51 |     const executableSchema = await makeRemoteExecutableSchema({
  52 |       schema: schema,
  53 |       link

Because introspectSchema expects link to be a function

Have any idea? Thanks :)

Try passing http variable instead of link variable into introspectSchema(), if you need Authorization header you can do it like this:

    const http = new HttpLink({
      uri: 'http://example.com/api',
      fetch,
      headers: {
        Authorization: `Bearer JSmxi5ocIhjKGENvgK66TrlqoylAPy8ZeAckiyo-4txKkYhdKSfLlPXLnxoghZm3`
      }
    });

PS: executor is just an http context expected by introspectSchema.

Thanks, can I use that also in the object passed to makeRemoteExecutableSchema?

yes

Thanks. Also, what does your package.json look like? want to make sure I have the same dependencies as you do

"dependencies": {
        "@gridsome/source-graphql": "^0.1.0",
        "@gridsome/source-wordpress": "^0.5.3",
        "cheerio": "^1.0.0-rc.3",
        "gridsome": "^0.7.19"
    },

So you're consuming apollo-link-context, apollo-link-http, graphql-tools, and node-fetch implicitly?

I'm getting this error, Error: You should provide GraphQLDirective to schemaComposer.addDirective(), but recieved: @infer
I posted an issue here: gridsome/gridsome#1279
Any idea?
Thank you :)

So you're consuming apollo-link-context, apollo-link-http, graphql-tools, and node-fetch implicitly?

As I copied the code from the article mentioned above, I thought of this too. Somehow these packages are already installed by gridsome itself or by either of the two source plugins i`m using.

Thanks, I replied in the issue.

I ended up removing all the package locks (yarn, npm, pnpm) and doing a fresh reinstall using yarn with these dependencies:

    "@gridsome/source-graphql": "~0.1.0",
    "graphql": "^14.0.0",
    "gridsome": "^0.7.0",

Renaming Types and RootFields section of this article (https://medium.com/hasura/the-ultimate-guide-to-schema-stitching-in-graphql-543ebcb25d42) resolved my issue.

Note: I did not use @gridsome/source-graphql plugin because it has limitations and the graphql query wont work inside api.loadSource() in gridsome.server.js

Would you mind sharing what you did to make it work? I'm having problems following the article mentioned 😕

https://pastebin.com/uTwYZBeh
https://pastebin.com/t7JQPaPg

These are the two functions I created and called them from gridsome.server.config
I hope it helps.