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. 网页的MVC模式简介

    #! /usr/bin/env python3 # -*- coding:utf-8 -*- #MVC:Model-View-Controller 模型-视图-控制器 #Python处理URL的函数就 ...

  2. (C/C++学习笔记) 五. 常变量(只读变量)和宏

    五. 常变量(只读变量)和宏 ● 常变量 常变量 #include <iostream.h>                    //预处理文件 int main() { const d ...

  3. PE文件 01 导入表

    0x01  导入表结构  数据目录表中的第二个成员标记了导入表的RVA和Size大小,由此可以定位到导入表: typedef struct _IMAGE_DATA_DIRECTORY { DWORD ...

  4. DevExpress WPF v18.2新版亮点(一)

    买 DevExpress Universal Subscription  免费赠 万元汉化资源包1套! 限量15套!先到先得,送完即止!立即抢购>> 行业领先的.NET界面控件2018年第 ...

  5. JS日期工具类(转)

    javascript Date format(js日期格式化) https://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.htm ...

  6. Capjoint的merrcmd生成二次曲线的misfit原理

    http://www.personal.psu.edu/jhm/f90/lectures/lsq2.html

  7. Session和Cookie,以及用户登录验证问题。

    参考 :https://blog.csdn.net/u010002184/article/details/79416199 https://www.bbsmax.com/A/RnJW72YJqY/ 首 ...

  8. golang---map类型

    map 类似其它语言中的哈希表或字典,以key-value形式存储数据 key必须是支持==或!=比较运算的类型,不可以是函数.map或slice Map查找比线性搜索快很多,但比使用索引访问数据的类 ...

  9. 爬虫系列2:scrapy项目入门案例分析

    本文从一个基础案例入手,较为详细的分析了scrapy项目的建设过程(在官方文档的基础上做了调整).主要内容如下: 0.准备工作 1.scrapy项目结构 2.编写spider 3.编写item.py ...

  10. Bug03_SSM整合_mybatis result maps collection already contains value...

    这个问题是在映射文件,但是这个映射文件是自动生成的. 所以想起来可能是在自动生成映射文件,pojo类时操作有问题.第一次运行时,出现错误,没有删除已经生成的文件就直接运行了第二次. 解决办法:删除旧的 ...