Evolution of writing Graphql Schema

Writing GraphQL Schema as Javascript

import { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLInt } from 'graphql'var UserType = new GraphQLObjectType({
name: 'User',
fields: () => ({
name: { type: GraphQLString },
email: { type: GraphQLString },
age: { type: GraphQLInt }
})
});
const QueryRootType = new GraphQLObjectType({
name: 'RootQuery',
fields: () => ({
getUser: {
type: UserType,
resolve: () => ({
name: 'Dilip',
email: 'dilip.kumar2k6@gmail.com',
age: 35
})
},
})
});
// This is the schema declaration
const appSchema = new GraphQLSchema({
query: QueryRootType
});

buildSchema over GraphQLSchema

import { buildSchema } from 'graphql';// Construct a schema, using GraphQL schema language
const typeDefs = buildSchema(`
type User {
name: String
email: String
age: Int
}
type Query {
getUser: User
}
`);
// Provide resolver functions for your schema fields
const resolvers = {
Query: {
getUser: () => ({
name: 'Dilip',
email: 'dilip.kumar2k6@gmail.com',
age: 35
}
),
},
};

Use of graphql-tools for writing GraphQL Schema

import { makeExecutableSchema } from 'graphql-tools';// Construct a schema, using GraphQL schema language
const typeDefs = `
type User {
name: String
email: String
age: Int
}
type Query {
getUser: User
}
`;
// Provide resolver functions for your schema fields
const resolvers = {
Query: {
getUser: (root, args, context) => {
return {
name: 'Dilip',
email: 'dilip.kumar2k6@gmail.com',
age: 35,
};
},
},
};
// GraphQL.js schema object as "schema"
const schema = makeExecutableSchema({
typeDefs,
resolvers,
});

Use of graphql-import to write Schema in separate file

# users/user.graphql file
type User {
name: String
email: String
age: Int
}
# index.graphql file
import User from './user/User.graphql'
type Query {
getUser: User
}
// index.js
const path = require('path');
const { makeExecutableSchema } = require('graphql-tools');
const { importSchema } = require('graphql-import');
// Load GraphQL schema from files
const typeDefs = importSchema(path.join(__dirname, './index.graphql'));
// Provide resolver functions for your schema fields
const resolvers = {
Query: {
getUser: (root, args, context) => {
return {
name: 'Dilip',
email: 'dilip.kumar2k6@gmail.com',
age: 34,
};
},
},
};
// Put together a schema
const schema = makeExecutableSchema({
typeDefs,
resolvers,
});

Use of AST to write Query for React Client

{
"kind": "Document",
"definitions": [
{
"kind": "OperationDefinition",
"operation": "query",
"name": null,
"variableDefinitions": null,
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"alias": null,
"name": {
"kind": "Name",
"value": "getUser",
"loc": {
"start": 4,
"end": 11
}
},
"arguments": [],
"directives": [],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"alias": null,
"name": {
"kind": "Name",
"value": "name",
"loc": {
"start": 18,
"end": 22
}
},
"arguments": [],
"directives": [],
"selectionSet": null,
"loc": {
"start": 18,
"end": 22
}
},
{
"kind": "Field",
"alias": null,
"name": {
"kind": "Name",
"value": "email",
"loc": {
"start": 27,
"end": 32
}
},
"arguments": [],
"directives": [],
"selectionSet": null,
"loc": {
"start": 27,
"end": 32
}
},
{
"kind": "Field",
"alias": null,
"name": {
"kind": "Name",
"value": "age",
"loc": {
"start": 37,
"end": 40
}
},
"arguments": [],
"directives": [],
"selectionSet": null,
"loc": {
"start": 37,
"end": 40
}
}
],
"loc": {
"start": 12,
"end": 44
}
},
"loc": {
"start": 4,
"end": 44
}
}
],
"loc": {
"start": 0,
"end": 46
}
},
"loc": {
"start": 0,
"end": 46
}
}
],
"loc": {
"start": 0,
"end": 46
}
}

Use Relay to write Query for React Client

import {graphql} from 'react-relay';graphql`
query {
getUser {
name
email
age
status
}
}
`;

Use of Apollo graphql-tag to write Query for React client

import gql from 'graphql-tag';

const query = gql`
{
getUser {
name
email
age
status
}
}
`

Use of babel-plugin-graphql-tag to compile at build time

Webpack preprocessing with graphql-tag/loader

loaders: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader'
}
]
getUser {
name
email
age
status
}
import query from './query.graphql';

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why You Should Use JavaScript for Machine Learning.

Introduction to Functional Abstractions in JavaScript

Waykichain Dapp Tutorial

What is Koa JS?

koa01

4 Best Practices for Large Scale Vue.js Projects

Create a Segmented Auto-Moving SMS Code Verification Input in React Native

API-less Prototyping with Angular

Classes > JavaScript — 10

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dilip Kumar

Dilip Kumar

More from Medium

4 New Product and Feature Announcements from MongoDB World 2022

How to delete records from MongoDB using Glue Job

How to delete records from MongoDB using Glue Job

Capabilities of “Sitespeed.io”

SQL vs NoSQL — How to Choose the Right Database Design