[GraphQL] Add an Interface to a GraphQL Schema
As we start building out more complex GraphQL schemas, certain fields start to repeat across different types. This is a perfect use-case for the Interface Type made available to us through GraphQL’s Type System. In this video, we’ll go over how to create an Interface Type and how to add it to an existing type in a GraphQL Schema.
Add an interface for video ID:
const {
GraphQLInterfaceType, GraphQLNonNull, GraphQLID
} = require('graphql');
const { videoType } = require('../schema'); const IDInterface = new GraphQLInterfaceType({
name : 'IDNode',
fields : {
id : {
type : new GraphQLNonNull(GraphQLID)
}
},
resolveType : (object) => {
if( object.title ) {
return videoType;
} return null;
}
}); module.exports = IDInterface;
Add interface for query:
const express = require('express');
const graphqlHttp = require('express-graphql');
const {
getVideoById, getVideos, createVideo
} = require('./data/index');
const IDInterface = require('./interfaces/index');
const server = express();
const port = process.env.PORT || ; const {
GraphQLSchema, GraphQLObjectType, GraphQLInputObjectType, GraphQLString, GraphQLList, GraphQLInt, GraphQLNonNull, GraphQLBoolean, GraphQLID
} = require('graphql'); const videoType = new GraphQLObjectType({
name : 'video',
description : 'A video on Egghead.io',
fields : {
id : {
type : new GraphQLNonNull(GraphQLID),
description : 'The id of the video'
},
title : {
type : GraphQLString,
description : 'The title of the video'
},
duration : {
type : GraphQLInt,
description : 'The duration of the video'
},
watched : {
type : GraphQLBoolean,
description : 'Whether or no the viewer watched the video'
}
},
interfaces: [IDInterface]
});
exports.videoType = videoType; const videoInputType = new GraphQLInputObjectType({
name : 'videoInput',
fields : {
title : {
type : new GraphQLNonNull(GraphQLID),
description : 'The title of the video'
},
duration : {
type : new GraphQLNonNull(GraphQLInt),
description : 'The duration of the video'
},
watched : {
type : new GraphQLNonNull(GraphQLBoolean)
}
}
}); const mutationType = new GraphQLObjectType({
name : 'Mutation',
description : 'The root Mutation type',
fields : {
createVideo : {
type : videoType,
args : {
video : {
type : new GraphQLNonNull(videoInputType),
},
},
resolve : (_, args) => {
return createVideo(args.video)
}
}
}
}); const queryType = new GraphQLObjectType({
name : 'QueryType',
description : 'The root query type',
fields : {
videos : {
type : new GraphQLList(videoType),
resolve : getVideos
},
video : {
type : videoType,
args : {
id : {
type : new GraphQLNonNull(GraphQLID),
description : 'The id of the video'
}
},
resolve : (_, args) => getVideoById(args.id)
}
}
}); const schema = new GraphQLSchema({
query : queryType,
mutation : mutationType
}); server.use('/graphql', graphqlHttp({
schema,
graphiql : true, // use graphiql interface
})); server.listen(port, () => {
console.log(`Listening on http`)
})
[GraphQL] Add an Interface to a GraphQL Schema的更多相关文章
- [GraphQL] Query GraphQL Interface Types in GraphQL Playground
Interfaces are similar to Unions in that they provide a mechanism for dealing with different types o ...
- [GraphQL] Write a GraphQL Schema in JavaScript
Writing out a GraphQL Schema in the common GraphQL Language can work for simple GraphQL Schemas, but ...
- 转 GraphQL Schema Stitching explained: Schema Delegation
转自官方文档 In the last article, we discussed the ins and outs of remote (executable) schemas. These remo ...
- Hasura GraphQL schema 生成是如何工作的
不像大部分的graphql 引擎,使用标准的graphql 规范的处理模型,Hasura graphql 不存在resolver 的概念(实际上是有的,只是转换为了sql语法) 以下是Hasura g ...
- graphql-inspector graphql schema比较&&文档校验&&查找破坏性变动工具
graphql-inspector 是一个方便的graphql 周边工具,可以加速graphql 应该的开发,同时可以帮助我们排查问题 包含以下特性: 进行schema 的比较 文档校验(通过sche ...
- ASP.NET Core中使用GraphQL - 第六章 使用EF Core作为持久化仓储
ASP.NET Core中使用GraphQL ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间件 ASP ...
- stardog graphql 简单操作
预备环境: 下载stardog 软件包 graphql 查询地址 创建一个简单数据库 ./stardog-admin db create -nstarwars graphql 查询方式 http 地址 ...
- 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 ...
- Vue + GraphQL初试
基本用法 GraphQL概述 GraphQL基本语法特性 GraphQL类型系统 GraphQL类型系统内置基础类型 GraphQL类型系统内置修饰符 GraphQL工作原理 GraphQL执行过程 ...
随机推荐
- Vue的全选功能实现思路
全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...
- 10. LCD驱动程序 ——框架分析
引言: 由LCD的硬件原理及操作(可参看韦哥博客:第017课 LCD原理详解及裸机程序分析) 我们知道只要LCD控制器的相关寄存器正确配置好,就可以在LCD面板上显示framebuffer中的内容. ...
- CSS3制作W3cplus的关注面板
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- LocationOnScreen-控件在手机屏幕中的位置坐标
我们可以通过如下的方法获得某个控件在屏幕中的绝对坐标 代码如下: private int[] mHistoryDisplayButtonLocation; private int mHistoryDi ...
- 1.1 Introduction中 Producers官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Producers 生产者(Producers) Producers publish ...
- 如何把excel同一个单元格内的文字和数字分别提取出来?
平台:excel 2010 目的:把excel同一个单元格内的文字和数字分别提取出来 操作: 假设数据在A1单元格:如果文字在前,B1=left(A1,lenb(A1)-len(A1))可得文字,C1 ...
- win10系统64位安装git后右键运行git bash here生成一个mintty.exe.stackdump文件后闪退解决方案
在其他win10电脑上复制了一个null.sys文件,替换C:\Windows\System32\drivers\null.sys,搞定.
- jQuery的原理
JQ的原理 jquery-1.xxx :专门为PC端诞生的类库,兼容所有的浏览器 jquery-2.xxx:当初是为了移动端而准备的,所以IE低版本浏览器一般不兼容,但是这个版本针对移动端的事件等操作 ...
- 使用doxygen为C/C++程序生成中文文档
文章来自:http://www.fmddlmyy.cn/text21.html 依照约定的格式凝视源码,用工具处理凝视过的源码产生文档.通过这样的方式产生文档至少有下面优点: 便于代码和文档保持同步. ...
- spark 编程教程
参考: 英文:https://spark.apache.org/docs/latest/programming-guide.html 中文:http://www.cnblogs.com/lujin ...