Modularizing your graphQL schemas

Working in a kinda big graphql server, schemas can easily get out of hand with all the types, inputs, queries, mutations, subscriptions and whatever else I’m missing. So there should be a way of separating them, modularizing them into smaller and more readable chunks right?

I found a way, and I wanna share it in case it can help you.

The Directory Structure

GraphQL Directory Structure

In this way you have a clear picture of the different type of graphQL files you have and where you should place new ones. I’m still not using Enums so that could be another category.

We’ll talk about the main.graphql in a minute.

Mashing them together

To combine the different graphql files we will use the graphql-import npm package. This is developed by the guys doing Prisma. It lets you import other graphql files with its import statement.

Let’s take this example type.

# import JSON from "../scalars/JSON.graphql"
# import JSON from "./Address.graphql" "Represents a person"
type Person {
"The id by how you identify the person"
id: ID! "The person's name"
name: String! "A mock content field for the person, as JSON. For this article."
content: JSON! "This person address"
address: Address!
}
  • First we see that we are imporing the JSON scalar, this is a scalar provided by the graphql-type-json npm package. I added it as a colorful detail.
  • Second, the same happens for a type but for Address.

You can image that the rest of the files will be pretty much the same, imports and usages in the schema.

So how do we create the final schema.graphql that the server will consume??

The “main.graphql”

This file will, recursively, have all your queries, mutations, subscriptions and their used types.

# import Query.* from "./queries/queries.graphql"
# import Mutation.* from "./mutations/mutations.graphql"
# import Subscription from "./subscriptions/subscriptions.graphql"

That’s it. graphql-import lets you use wildcards for consuming elements in the .graphql. Check more options in their docs.

The usage is pretty much like this:

import { importSchema } from 'graphql-import'
import { makeExecutableSchema } from 'graphql-tools' const typeDefs = importSchema('main.graphql');
const resolvers = {}; const schema = makeExecutableSchema({ typeDefs, resolvers });
// etc

Bonus Tracks

Webpack integration

You can use graphql-import-loader to let webpack manage the combining them.

Build the schema in a NPM Script

I need to generate this schema before publishing my npm package, so on the prepublishOnly I run this:

const fs = require('fs');
const gqlImport = require('graphql-import'); const newSchema = gqlImport.importSchema('path/2/main.graphql');
fs.writeFileSync('path/2/new/generated/schema.graphql', newSchema);

Minified to get it in the script:

{
"scripts": {
"generateGqlSchema": "node -e \"const fs=require('fs'),i=require('graphql-import');fs.writeFileSync('src/main/resources/graphql/generated/schema.graphql',i.importSchema('src/main/resources/graphql/main.graphql'));\""
}
}

I will scale this more in the future so I’ll see how it stands the test of time, but for now it seems to work!

Let me know if you have an idea around it! Cheers!

Modularizing your graphQL schemas的更多相关文章

  1. 转 How do GraphQL remote schemas work

    文章转自 prisma 官方博客,写的很不错 In this article, we want to understand how we can use any existing GraphQL AP ...

  2. [GraphQL] Write a GraphQL Schema in JavaScript

    Writing out a GraphQL Schema in the common GraphQL Language can work for simple GraphQL Schemas, but ...

  3. GraphQL Gateway Architectures

    转自: https://tomasalabes.me/blog/graphql/node/microservices/2018/08/11/graphql-architectures.html Gra ...

  4. 转 GraphQL Schema Stitching explained: Schema Delegation

    转自官方文档 In the last article, we discussed the ins and outs of remote (executable) schemas. These remo ...

  5. Why GraphQL is Taking Over APIs

    A few years ago, I managed a team at DocuSign that was tasked with re-writing the main DocuSign web ...

  6. [GraphQL] Add an Interface to a GraphQL Schema

    As we start building out more complex GraphQL schemas, certain fields start to repeat across differe ...

  7. The Architectural Principles Behind Vrbo’s GraphQL Implementation

    转自:https://medium.com/expedia-group-tech/graphql-component-architecture-principles-homeaway-ede8a58d ...

  8. 朱晔的互联网架构实践心得S2E5:浅谈四种API设计风格(RPC、REST、GraphQL、服务端驱动)

    Web API设计其实是一个挺重要的设计话题,许多公司都会有公司层面的Web API设计规范,几乎所有的项目在详细设计阶段都会进行API设计,项目开发后都会有一份API文档供测试和联调.本文尝试根据自 ...

  9. GraphQL入门3(Mutation)

    创建一个新的支持Mutation的Schema. var GraphQLSchema = require('graphql').GraphQLSchema; var GraphQLObjectType ...

随机推荐

  1. vue-11-自定义指令

    用于对纯 DOM 元素进行底层操作. // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中. inserted: func ...

  2. iconfont.cn批量加入

    iconfont.cn还没有一个批量加入的功能 以下是最新的图标批量加入购物车功能代码. var icons = document.querySelectorAll('.icon-gouwuche1' ...

  3. GFS中文翻译

    Google文件系统 GFS是一个可扩展的分布式文件系统,用于大型的.分布式的.对大量数据进行访问的应用.它运行于廉价的普通硬件上,但可以提供容错功能.它可以给大量的用户提供总体性能较高的服务. 1. ...

  4. python 正则表达式笔记

    #!usr/bin/env python3 #-*- coding:utf-8 -*- #正则表达式 #在正则表达式中,如果直接给出字符,就是精确匹配.用\d可以匹配一个数字,\w可以匹配一个字母.数 ...

  5. 七. Python基础(7)--文件的读写

    七. Python基础(7)--文件的读写 1 ● 文件读取的知识补充 f = open('file', encoding = 'utf-8') content1 = f.read() content ...

  6. 用FPGA对ASIC进行原型验证的过程(转)

    用FPGA对ASIC进行原型验证的过程   reference:http://xilinx.eetrend.com/d6-xilinx/article/2018-10/13736.html     鉴 ...

  7. mySql单列索引与联合索引的区别

    引自https://my.oschina.net/857359351/blog/658668 第一张表gift和索引为联合索引,如图: 第二张表gift2为单列索引,如图: 下面开始进行测试: 相同的 ...

  8. mybatis 插入空值时报错 TypeException

    报错内容:nested exception is org.apache.ibatis.type.TypeException: Could not set parameters for mapping: ...

  9. day 50 JS框架基础

    一 JavaScript的历史1 Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本 ...

  10. Node.js 回调函数 1) 阻塞 ,同步 2) 非阻塞 ,异步.

    1.阻塞. 同步. 1) 读取的文件: input.txt 菜鸟教程官网地址:www.runoob.com 2) main.js var fs = require("fs"); / ...