Created
July 12, 2023 08:48
-
-
Save edwilliams/8b00a04e1e817d9dd829987f3824aa7a to your computer and use it in GitHub Desktop.
GraphQL Demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>GraphQL</title> | |
| </head> | |
| <pre></pre> | |
| <body> | |
| <script> | |
| async function queryGraphQLServer() { | |
| const response = await fetch('http://localhost:4000/graphql', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| query: '{ items { id name }}', | |
| }), | |
| }) | |
| const data = await response.json() | |
| const pre = document.querySelector('pre') | |
| pre.textContent = JSON.stringify(data, null, 2) | |
| } | |
| queryGraphQLServer() | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "graphql", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "server.js", | |
| "type": "module", | |
| "scripts": { | |
| "dev": "nodemon server.js", | |
| "app": "serve" | |
| }, | |
| "keywords": [], | |
| "author": "", | |
| "license": "ISC", | |
| "dependencies": { | |
| "@graphql-tools/schema": "^9.0.15", | |
| "cors": "^2.8.5", | |
| "express": "^4.18.2", | |
| "express-graphql": "^0.12.0", | |
| "graphql": "^14.7.0" | |
| }, | |
| "devDependencies": { | |
| "nodemon": "^2.0.20", | |
| "serve": "^14.2.0" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "info": { | |
| "name": "GraphQL Todo List", | |
| "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json" | |
| }, | |
| "item": [ | |
| { | |
| "name": "get all", | |
| "request": { | |
| "method": "POST", | |
| "header": [], | |
| "body": { | |
| "mode": "graphql", | |
| "graphql": { | |
| "query": "query {\n items {\n id\n name\n }\n}", | |
| "variables": "" | |
| } | |
| }, | |
| "url": { | |
| "raw": "http://localhost:4000/graphql", | |
| "protocol": "http", | |
| "host": ["localhost"], | |
| "port": "4000", | |
| "path": ["graphql"] | |
| } | |
| }, | |
| "response": [] | |
| }, | |
| { | |
| "name": "get single", | |
| "request": { | |
| "method": "POST", | |
| "header": [], | |
| "body": { | |
| "mode": "graphql", | |
| "graphql": { | |
| "query": "query {\n item(id: \"002\") {\n id\n name\n }\n}", | |
| "variables": "{\n \"id\":\"002\"\n}" | |
| } | |
| }, | |
| "url": { | |
| "raw": "http://localhost:4000/graphql", | |
| "protocol": "http", | |
| "host": ["localhost"], | |
| "port": "4000", | |
| "path": ["graphql"] | |
| } | |
| }, | |
| "response": [] | |
| }, | |
| { | |
| "name": "create new", | |
| "request": { | |
| "method": "POST", | |
| "header": [], | |
| "body": { | |
| "mode": "graphql", | |
| "graphql": { | |
| "query": "mutation {\n createItem(id: \"004\", name: \"Foobar\") {\n id\n name\n }\n}", | |
| "variables": "" | |
| } | |
| }, | |
| "url": { | |
| "raw": "http://localhost:4000/graphql", | |
| "protocol": "http", | |
| "host": ["localhost"], | |
| "port": "4000", | |
| "path": ["graphql"] | |
| } | |
| }, | |
| "response": [] | |
| }, | |
| { | |
| "name": "edit item", | |
| "request": { | |
| "method": "POST", | |
| "header": [], | |
| "body": { | |
| "mode": "graphql", | |
| "graphql": { | |
| "query": "mutation {\n editItem(id: \"001\", name: \"wibble\") {\n id\n name\n }\n}", | |
| "variables": "" | |
| } | |
| }, | |
| "url": { | |
| "raw": "http://localhost:4000/graphql", | |
| "protocol": "http", | |
| "host": ["localhost"], | |
| "port": "4000", | |
| "path": ["graphql"] | |
| } | |
| }, | |
| "response": [] | |
| }, | |
| { | |
| "name": "remove item", | |
| "request": { | |
| "method": "POST", | |
| "header": [], | |
| "body": { | |
| "mode": "graphql", | |
| "graphql": { | |
| "query": "mutation {\n removeItem(id: \"003\") {\n id\n }\n}", | |
| "variables": "" | |
| } | |
| }, | |
| "url": { | |
| "raw": "http://localhost:4000/graphql", | |
| "protocol": "http", | |
| "host": ["localhost"], | |
| "port": "4000", | |
| "path": ["graphql"] | |
| } | |
| }, | |
| "response": [] | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import express from 'express' | |
| import cors from 'cors' | |
| import { graphqlHTTP } from 'express-graphql' | |
| import { makeExecutableSchema } from '@graphql-tools/schema' | |
| const app = express() | |
| const port = 4000 | |
| const data = { | |
| items: [ | |
| { id: '001', name: 'foo' }, | |
| { id: '002', name: 'bar' }, | |
| { id: '003', name: 'buz' }, | |
| ], | |
| } | |
| const typeDefs = ` | |
| type Item { | |
| id: ID! | |
| name: String! | |
| } | |
| type Query { | |
| item( id: String ): Item! | |
| items: [Item] | |
| } | |
| type Mutation { | |
| createItem( id: String!, name: String! ): Item! | |
| } | |
| type Mutation { | |
| editItem( id: String!, name: String! ): Item! | |
| } | |
| type Mutation { | |
| removeItem( id: String! ): Item! | |
| } | |
| ` | |
| const resolvers = { | |
| Query: { | |
| item: (obj, { id: _id }, context) => | |
| context.items.find(({ id }) => id === _id), | |
| items: (obj, args, { items }) => items, | |
| }, | |
| Mutation: { | |
| editItem: (obj, args, { items }) => { | |
| items.forEach((item) => { | |
| if (item.id === args.id) { | |
| item.name = args.name | |
| } | |
| }) | |
| return args | |
| }, | |
| removeItem: (obj, args, { items }) => { | |
| data.items = items.filter(({ id }) => id !== args.id) | |
| return args | |
| }, | |
| createItem: (obj, args, { items }) => { | |
| items.push({ ...args }) | |
| return args | |
| }, | |
| }, | |
| } | |
| const executableSchema = makeExecutableSchema({ | |
| typeDefs, | |
| resolvers, | |
| }) | |
| app.use(cors()) | |
| app.use(express.json()) | |
| app.use(express.urlencoded({ extended: true })) | |
| app.use( | |
| '/graphql', | |
| graphqlHTTP({ | |
| schema: executableSchema, | |
| context: data, | |
| graphiql: true, | |
| }) | |
| ) | |
| app.listen(port, () => { | |
| console.log(`Running a server at http://localhost:${port}`) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment