Created
March 28, 2024 20:38
-
-
Save neopunisher/b482b0e6a4b669b4daf2bbae93ae1c0c to your computer and use it in GitHub Desktop.
Graphql stand alone
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>React App</title> | |
| </head> | |
| <body> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "graphql": "https://esm.sh/graphql", | |
| "graphql-tools": "https://esm.sh/@graphql-tools/schema" | |
| } | |
| } | |
| </script> | |
| <script type="module"> | |
| // import graphql from "graphql" | |
| //import * as graphql from "graphql" | |
| //import {parse} from "graphql" | |
| //console.log(parse(query)) | |
| import { graphql } from 'graphql' | |
| const posts = [{msg:"test"}] | |
| const typeDefs = /* GraphQL */ ` | |
| type Post { | |
| msg: String | |
| } | |
| # the schema allows the following query: | |
| type Query { | |
| posts: [Post] | |
| } | |
| # this schema allows the following mutation: | |
| type Mutation { | |
| upvotePost(postId: ID!): Post | |
| } | |
| # we need to tell the server which types represent the root query | |
| # and root mutation types. We call them RootQuery and RootMutation by convention. | |
| schema { | |
| query: Query | |
| mutation: Mutation | |
| } | |
| ` | |
| const resolvers = { | |
| Query: { | |
| posts() { | |
| return posts | |
| } | |
| }, | |
| Mutation: { | |
| upvotePost(_, { postId }) { | |
| return posts[0] | |
| } | |
| }, | |
| } | |
| import { makeExecutableSchema } from 'graphql-tools' | |
| const executableSchema = makeExecutableSchema({ | |
| typeDefs, | |
| resolvers | |
| }) | |
| const query = /* GraphQL */ ` | |
| query tasksForUser { | |
| posts { | |
| msg | |
| } | |
| } | |
| ` | |
| graphql({ | |
| schema: executableSchema, | |
| source: query | |
| }).then(result => console.log('Got result', result)) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment