gatsby-source-modular-graphql v1.1.0

Gatsby Modular GraphQL Source Plugin

Gatsby source plugin which adds modularized third-party GraphQL schemas to Gatsby GraphQL with Apollo-Client side execution support.

Conceptual thoughts

• Unified and frontend-driven way to define schemas, resolvers, context and data queries/mutations
• Adds local and remote third-party GraphQL schemas to the client-side and Gatsby GraphQL data sources
• Modularize and combine multiple local and remote GraphQL-Schemas into One-Graph

Read more:

• Principled GraphQL
• Generating a schema
• Resolvers
• Remote Schemas
• Schema stitching

Setup

npm install gatsby-source-modular-graphql --save-dev yarn add gatsby-source-modular-graphql --dev

How to use?

gatsby-config.js

{
  resolve: 'gatsby-source-modular-graphql',
  options: {
    path: './graphql',
    schemaModules:
      process.env.NODE_ENV === 'remote'
        ? ['my-remote-schema']
        : ['my-local-schema'],
  },
}

How to add a local schema?

./graphql/my-local-schema

module.exports = {
  typeDefs: `
  type Query {
    todos: [Todo]
  }

  type Todo {
    id: ID!
    description: String
    done: Boolean
  }
  `,
  resolvers: {
    Query: {
      todos: (parent, args, { todos: { todosAll } }) => {
        return todosAll();
      },
    },
  },
  context: {
    todos: {
      todosAll: () => [
        { id: 1, description: 'A', done: false, modifiedAt: Date.now() },
        { id: 2, description: 'B', done: false, modifiedAt: Date.now() },
      ],
    },
  },
};

How to add a remote schema?

./graphql/my-remote-schema

module.exports = {
  uri: 'https://example.com/graphql',
  headers: {
    authorization: 'secret',
  },
  typeDefs: `
  type Query {
    todos: [Todo]
  }

  type Todo {
    id: ID!
    description: String
    done: Boolean
  }
  `,
};

How to use in my Gatsby-Pages and React-Components?

• Statically using StaticQuery
• Dynamically using Apollo-React Query and Apollo-React Muation