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. 十六. Python基础(16)--内置函数-2

    十六. Python基础(16)--内置函数-2 1 ● 内置函数format() Convert a value to a "formatted" representation. ...

  2. FPGA构造spi时序——AD7176为例(转)

    reference:https://blog.csdn.net/fzhykx/article/details/79490330 项目中用到了一种常见的低速接口(spi),于是整理了一下关于spi相关的 ...

  3. Docker Kubernetes(K8s)简介

    入职了新公司,使用了Docker和K8s,需要有一个基础的了解,对网络上相关信息进行了简单总结. 一Docker 1简介: Docker 将应用程序与该程序的依赖,打包在一个文件里面.运行这个文件,就 ...

  4. Centos7部署Flannel网络(八)

    1.为Flannel生成证书 [root@linux-node1 ssl]# vim flanneld-csr.json { "CN": "flanneld", ...

  5. Unity最新版打包AssetBundle和加载的方法

    一.设置assetBundleName二.构建AssetBundle包三.上传AssetBundle到服务器四.把AssetBundle放到本地五.操作AssetBundle六.完整例子七.Asset ...

  6. 《统计学习方法》笔记(8):AdaBoost算法

    AdaBoost是最有代表性的提升算法之一.其基本思想可以表述为:多个专家的综合判断,要优于任意一个专家的判断. 1.什么是提升算法? "装袋"(bagging)和"提升 ...

  7. css 纸张效果 666

    css /*内外阴影添加*/ .tool-intro { width: 1020px; height: 100px; margin: 0 auto; margin-bottom: 50px; padd ...

  8. CSS3一个酷炫的加载效果

    上效果图,用截屏工具制作的,看起来有点卡,在网页上面显示还是不错的. CSS代码: <style type="text/css"> .loader{ position: ...

  9. 【Python】爬虫-2

    8. urllib2.urlopen可以接受一个Request对象或者url,(在接受Request对象时候,并以此可以来设置一个URL的headers),urllib.urlopen只接收一个url ...

  10. linux 安装crontab执行定时任务

    转载:https://www.cnblogs.com/xiaoluo501395377/archive/2013/04/06/3002602.html http://yangqijun.iteye.c ...