GraphQL Modules (fn)

UNDER HEAVY DEVELOPMENT

Motivation

Apollo's GraphQL server supports modules which uses plain GraphQL's schema language allowing developers to separate type definitions and resolvers by domains. This feature should it be separated from Apollo's server so we can use this concept with other server enabling this feature on the browser with somehting like apollo-link-schema.

The (fn) on the name is because it has a more "functional" style than the graphql-modules.

GraphQL Modules is a very nice battle tested, well documented and complete set of tools. But for some cases it can be an overhead for a team which just wants to organize their code in modules, no dependency injection or injectable providers. It has a strong opinion of how to use DI, how to handle context or resolvers composition. Also it has a more object (class) oriented programming which can be overwelming for some developers which prefer the functional style. Not a good option to use GraphQL on the browser since the @graphql-modules/[email protected] is 55.7 kB minified + gzipped without the rest of the suite of tools like @graphql-modules/[email protected] which needs the Reflect Metada api that doesn't exist in the browser yet.

Usage

Installation

npm i graphql-modules-fn

or

yarn add graphql-modules-fn

Example of a simple blog.

import gql from 'graphql-tag'

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
  }

  extend type Query {
    users: [User]!
  }
`

const resolvers = {
  Query: {
    users: (root, args, context) => [
      { id: '1', name: 'Sebas' },
      { id: '2', name: 'Rick' },
      { id: '3', name: 'Morty' },
    ],
  },
}

export default { typeDefs, resolvers }

import gql from 'graphql-tag'

const typeDefs = gql`
  type Comment {
    id: ID!
    title: String!
    body: String!
    author: User!
  }

  extend type Content {
    comments: [Comment]!
  }
`

const resolvers = {
  Content: {
    comments: (root, args, context) => [
      {
        id: '1',
        title: 'Proident senectus',
        body: 'Cras varius proident senectus!',
        author: { id: '1', name: 'Sebas' },
      },
      {
        id: '2',
        title: 'Faucibus feugiat pulvinar quam',
        body: 'Consectetur soluta, incidunt semper.',
        author: { id: '2', name: 'Rick' },
      },
    ],
  },
}

export default { typeDefs, resolvers }

import gql from 'graphql-tag'

const typeDefs = gql`
  type Content {
    id: ID!
    title: String!
    body: String
  }

  extend type User {
    articles: [Content]!
  }
`

const resolvers = {
  User: {
    articles: (root, args, context) => [
      {
        id: '1',
        title: 'Sapiente quidem architecto',
        body:
          'Augue tempora excepteur, cras varius proident senectus minima fuga proident temporibus fuga!',
      },
      {
        id: '2',
        title: 'Fuga curae illum suscipit eget',
        body:
          'Faucibus feugiat pulvinar quam, consectetur soluta, incidunt semper! Nobis ipsum, aliquid excepteur.',
      },
    ],
  },
}

export default { typeDefs, resolvers }

import { bundle } from 'graphql-modules-fn'

import content from './modules/content'
import user from './modules/user'
import comment from './modules/comment'

const modules = [user, comment, content]

export default function createSchema() {
  return bundle(modules) //=> { schema, context }
}

import { ApolloServer } from 'apollo-server'

import createSchema from './createSchema'

export default async function createServer(port) {
  const { schema, context } = await createSchema()

  return new ApolloServer({ schema, context }).listen(port)
}

import createServer from './createServer'

const { PORT = 3000 } = process.env

const server = createServer(PORT).then(({ url }) => {
  console.log(`🚀 Server eready at ${url}`)
})

More examples:

• Simple blog using Apollo's graphql server.
• GraphQL on the browser with apollo-link-schema.

Running GraphQL in the browser

Base modules

• 10.3kb | @apollographql/apollo-tools
• 40.9kb | graphql
• 3.7kb | apollo-link-schema
• 984b | graphql-tag
• 2.5kb | react-apollo-hooks
• 16kb | apollo-client
• 9.7kb | apollo-cache-inmemory

Bundle size: ~84kb.

GraphQL Modules (fn)

• 1.1kb | graphql-modules-fn

Bundle size: ~85kb.

• 55.2kb | @graphql-modules/core

Bundle size: ~139kb. Incrementing ~40% of your bundle size.

TODO:

• [ ] Add usage of contexts.
• [ ] Start a documentation site.
• [ ] Subscriptions support (waiting for PR #1047 to be merged).
• [ ] Tests with 100% of converage.