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. win10企业版激活

    slmgr.vbs /upk slmgr /ipk NPPR9-FWDCX-D2C8J-H872K-2YT43 slmgr /skms zh.us.to slmgr /ato

  2. CentOS7安装Nginx及配置

    Nginx是一款轻量级的网页服务器.反向代理服务器.相较于Apache.lighttpd具有占有内存少,稳定性高等优势.**它最常的用途是提供反向代理服务.** 安装   在Centos下,yum源不 ...

  3. 开发中最好使用not exists 取代not in

    开发中使用not in可能会存在致命的错误,在子查询中,如果存在空值,not in返回的数据就是空了,如下创建2张数据表: user表: 部门表: 现在要查询没有分配到用户的部门有哪些,使用not i ...

  4. SharePoint REST API - 基本操作(二)

    博客地址:http://blog.csdn.net/FoxDave 上一节讲了SharePoint REST API的一些基本操作,本节将继续介绍一些关于SharePoint REST API的内容. ...

  5. C#窗体的浮动及隐藏

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  6. http 协议三次握手

    HTTP是超文本传输协议,信息是明文传输.TPC/IP协议是传输层协议,主要解决数据如何在网络中传输.HTTP是应用层协议,主要解决如何包装数据. [HTTP与TCP/IP]和其他的协议在最初OSI模 ...

  7. JS数据的基本类型

    字符串   String 数字    Number 布尔    Boolean Null     空 Undefined Object   对象  Array 数组   json   function ...

  8. swift3.0 简单直播和简单网络音乐播放器

    本项目采用swift3.0所写,适配iOS9.0+,所有界面均采用代码布局. 第一个tab写的是简单直播,传统MVC模式,第二个tab写的是简单网络音乐播放器.传说MVVM模式(至于血统是否纯正我就不 ...

  9. 单点登录系统---SSO

    1.------------------SSO介绍--------------------------------- 有什么卵用?搞什么飞机的? 大家看看这个图,一个系统是没有问题.如果是分布式的系统 ...

  10. Spring Boot 揭秘与实战 附录 - Spring Boot 公共配置

    Spring Boot 公共配置,配置 application.properties/application.yml 文件中. 摘自:http://docs.spring.io/spring-boot ...