Hvad er GraphQL?<\/h2>\n
Fra den officielle dokumentation<\/a>: “GraphQL er et foresp\u00f8rgselssprog til API’er og en runtime til at opfylde disse foresp\u00f8rgsler med dine eksisterende data. GraphQL giver en komplet og forst\u00e5elig beskrivelse af dataene i din API, giver klienterne mulighed for at sp\u00f8rge om pr\u00e6cis det, de har brug for, og ikke mere, g\u00f8r det lettere at udvikle API’er over tid og muligg\u00f8r kraftfulde udviklerv\u00e6rkt\u00f8jer.”<\/p>\n GraphQL er en server-side runtime til udf\u00f8relse af foresp\u00f8rgsler ved hj\u00e6lp af det typesystem, du har defineret for dine data. GraphQL er heller ikke bundet til nogen specifik database eller lagringsmotor. I stedet bakkes den op af din eksisterende kode og datalagring. Du kan f\u00e5 en detaljeret sammenligning af disse teknologier med GraphQL vs. RESTful API-guiden<\/a>.<\/p>\n Hvis du vil oprette en GraphQL-tjeneste, starter du med at definere skematyper og oprette felter ved hj\u00e6lp af disse typer. Dern\u00e6st leverer du en funktionsopl\u00f8ser, der skal udf\u00f8res p\u00e5 hvert felt og hver type, n\u00e5r der anmodes om data fra klientsiden.<\/p>\n GraphQL-typesystemet bruges til at beskrive, hvilke data der kan foresp\u00f8rges, og hvilke data du kan manipulere. Det er kernen i GraphQL. Lad os diskutere forskellige m\u00e5der, hvorp\u00e5 vi kan beskrive og manipulere data i GraphQ.<\/p>\n GraphQL-objekttyper er datamodeller, der indeholder st\u00e6rkt skrevne felter. Der skal v\u00e6re en 1-til-1-mapping mellem dine modeller og GraphQL-typer. Nedenfor er et eksempel p\u00e5 en GraphQL-type:<\/p>\n GraphQL Query definerer alle de foresp\u00f8rgsler, som en klient kan k\u00f8re p\u00e5 GraphQL API’et. Du b\u00f8r definere en Nedenfor definerer og mapper vi foresp\u00f8rgslerne til den tilsvarende RESTful API:<\/p>\n Hvis GraphQL-foresp\u00f8rgsler er Vi vil placere alle mutationer i en enkelt Du har bem\u00e6rket brugen af Du kan definere inputtyperne som nedenfor:<\/p>\n Resolvers fort\u00e6ller GraphQL, hvad der skal ske, n\u00e5r der anmodes om hver foresp\u00f8rgsel eller mutation. Det er en grundl\u00e6ggende funktion, der g\u00f8r det h\u00e5rde arbejde med at ramme databaselaget for at udf\u00f8re CRUD-operationer (oprette, l\u00e6se, opdatere, slette), ramme et internt RESTful API endpoint eller kalde en microservice<\/a> for at opfylde klientens anmodning.<\/p>\n Du kan oprette en ny resolvers.js<\/strong>-fil og tilf\u00f8je f\u00f8lgende kode:<\/p>\n GraphQL-skemaet er det, som GraphQL eksponerer for verden. Derfor vil typer, foresp\u00f8rgsler og mutationer blive inkluderet i skemaet for at blive eksponeret for verden.<\/p>\n Nedenfor kan du se, hvordan du eksponerer typer, foresp\u00f8rgsler og mutationer for verden:<\/p>\n I ovenst\u00e5ende script har vi inkluderet GraphQL tilbyder en implementering til alle st\u00f8rre programmeringssprog, og Node.js er ikke undtaget. P\u00e5 det officielle GraphQL-websted<\/a> er der en sektion for JavaScript-underst\u00f8ttelse<\/a>, og der er ogs\u00e5 andre implementeringer af GraphQL for at g\u00f8re det nemt at skrive og kode.<\/p>\n GraphQL Apollo tilbyder en implementering til Node.js og Express.js og g\u00f8r det nemt at komme i gang med GraphQL.<\/p>\n Du vil l\u00e6re at oprette og udvikle din f\u00f8rste GraphQL-applikation i Node.js og Express.js<\/a> backend-ramme ved hj\u00e6lp af GraphQL Apollo i n\u00e6ste afsnit.<\/p>\n Det er ligetil at opbygge en GraphQL API-server med Express.js for at komme i gang. I dette afsnit vil vi unders\u00f8ge, hvordan man opbygger en GraphQL-server.<\/p>\n F\u00f8rst skal du installere og ops\u00e6tte et nyt Express.js-projekt. Opret en mappe til dit projekt, og installer Express.js ved hj\u00e6lp af denne kommando:<\/p>\n Ovenst\u00e5ende kommando opretter en ny package.json<\/strong>-fil og installerer Express.js-biblioteket i dit projekt.<\/p>\n Dern\u00e6st strukturerer vi vores projekt som vist i billedet nedenfor. Det vil indeholde forskellige moduler til projektets funktioner som f.eks. brugere, todos osv.<\/p>\n Lad os starte med at installere GraphQL Express.js-afh\u00e6ngighederne. K\u00f8r f\u00f8lgende kommando for at installere:<\/p>\n Dern\u00e6st opretter vi en index.js<\/strong>-fil i mappen modules og tilf\u00f8jer f\u00f8lgende kodestump:<\/p>\n Lad os gennemg\u00e5 kodeudsnittet og bryde det ned:<\/p>\n F\u00f8rst importerede vi de n\u00f8dvendige biblioteker og oprettede standard foresp\u00f8rgsels- og mutationstyper. Foresp\u00f8rgsels- og mutationstyperne indstiller kun versionen af GraphQL API’et for nu. Vi vil dog udvide foresp\u00f8rgslen og mutationen til at omfatte andre skemaer, efterh\u00e5nden som vi forts\u00e6tter.<\/p>\n Derefter oprettede vi en ny scalartype for tid og vores f\u00f8rste resolver til den foresp\u00f8rgsel og mutation, der er oprettet ovenfor. Derudover genererede vi ogs\u00e5 et skema ved hj\u00e6lp af funktionen Det genererede skema indeholder alle de andre skemaer, vi importerede, og vil ogs\u00e5 indeholde flere, n\u00e5r vi opretter og importerer dem.<\/p>\n Ovenst\u00e5ende kodestump viser, at vi importerede forskellige skemaer i makeExecutableSchema-funktionen. Denne fremgangsm\u00e5de hj\u00e6lper os med at strukturere applikationen med henblik p\u00e5 kompleksitet. Dern\u00e6st skal vi oprette de Todo- og User-skemaer, som vi importerede.<\/p>\n Todo-skemaet viser simple CRUD-operationer, som brugerne af applikationen kan udf\u00f8re. Nedenfor er det skema, der implementerer Todo CRUD-operationen.<\/p>\n Lad os gennemg\u00e5 kodeudsnittet og bryde det ned:<\/p>\n F\u00f8rst oprettede vi et skema for vores Todo ved hj\u00e6lp af GraphQL Dern\u00e6st oprettede vi en resolver, som bruges til at hente de korrekte data, n\u00e5r en bestemt foresp\u00f8rgsel eller mutation kaldes.<\/p>\n N\u00e5r resolver-funktionen er p\u00e5 plads, kan vi oprette individuelle metoder til forretningslogikken og databasemanipulationen som vist i eksemplet create-todo.js<\/strong>.<\/p>\n Opret en fil create-user.js<\/strong> i mappen Kodestumpen ovenfor er en forenklet m\u00e5de at oprette en ny Todo i vores database ved hj\u00e6lp af Sequelize ORM. Du kan f\u00e5 mere at vide om Sequelize, og hvordan du konfigurerer det med Node.js<\/a>.<\/p>\n Du kan f\u00f8lge det samme trin for at oprette mange skemaer afh\u00e6ngigt af din applikation, eller du kan klone det komplette projekt fra GitHub<\/a>.<\/p>\n Dern\u00e6st skal vi ops\u00e6tte serveren med Express.js og k\u00f8re den nyoprettede Todo-applikation med GraphQL og Node.js.<\/p>\nGraphQL-terminologi<\/h2>\n
Objekttyper<\/h3>\n
type User {\n id: ID! # The \"!\" means required\n firstname: String\n lastname: String\n email: String\n username: String\n todos: [Todo] # Todo is another GraphQL type\n}<\/code><\/pre>\nQueries<\/h3>\n
RootQuery<\/code>, som vil indeholde alle eksisterende foresp\u00f8rgsler som en konvention.<\/p>\ntype RootQuery {\n user(id: ID): User # Corresponds to GET \/api\/users\/:id\n users: [User] # Corresponds to GET \/api\/users\n todo(id: ID!): Todo # Corresponds to GET \/api\/todos\/:id\n todos: [Todo] # Corresponds to GET \/api\/todos\n}<\/code><\/pre>\nMutations<\/h3>\n
GET<\/code> -foresp\u00f8rgsler, er mutationer POST<\/code>, PUT<\/code>, PATCH<\/code> og DELETE<\/code> -foresp\u00f8rgsler, der manipulerer GraphQL API.<\/p>\nRootMutation<\/code> for at demonstrere dem:<\/p>\ntype RootMutation {\n createUser(input: UserInput!): User # Corresponds to POST \/api\/users\n updateUser(id: ID!, input: UserInput!): User # Corresponds to PATCH \/api\/users\n removeUser(id: ID!): User # Corresponds to DELETE \/api\/users\n createTodo(input: TodoInput!): Todo\n updateTodo(id: ID!, input: TodoInput!): Todo\n removeTodo(id: ID!): Todo\n}<\/code><\/pre>\n-input<\/code> typer til mutationerne s\u00e5som UserInput<\/code>, TodoInput<\/code>. Det er altid den bedste praksis altid at definere inputtyper til oprettelse og opdatering af dine ressourcer.<\/p>\ninput UserInput {\n firstname: String!\n lastname: String\n email: String!\n username: String!\n}<\/code><\/pre>\nResolvers<\/h3>\n
import sequelize from '..\/models';\nexport default function resolvers () {\n const models = sequelize.models;\n return {\n \/\/ Resolvers for Queries\n RootQuery: {\n user (root, { id }, context) {\n return models.User.findById(id, context);\n },\n users (root, args, context) {\n return models.User.findAll({}, context);\n }\n },\n User: {\n todos (user) {\n return user.getTodos();\n }\n },\n }\n \/\/ Resolvers for Mutations\n RootMutation: {\n createUser (root, { input }, context) {\n return models.User.create(input, context); \n },\n updateUser (root, { id, input }, context) {\n return models.User.update(input, { ...context, where: { id } });\n },\n removeUser (root, { id }, context) {\n return models.User.destroy(input, { ...context, where: { id } });\n },\n \/\/ ... Resolvers for Todos go here\n }\n}<\/code><\/pre>\nSchema<\/h3>\n
schema {\n query: RootQuery\n mutation: RootMutation\n}<\/code><\/pre>\nRootQuery<\/code> og RootMutation<\/code>, som vi har oprettet tidligere, og som skal eksponeres for verden.<\/p>\nHvordan fungerer GraphQL med Node.js og Express.js?<\/h2>\n
Ops\u00e6tning af GraphQL med Express.js<\/h2>\n
Initialis\u00e9r projekt med Express<\/h3>\n
cd <project-name> && npm init -y\nnpm install express<\/code><\/pre>\n![\"En](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/graphql-todo-structrue.png\")
Initialisere GraphQL<\/h3>\n
npm install apollo-server-express graphql @graphql-tools\/schema --save<\/code><\/pre>\nOprettelse af skemaer og typer<\/h3>\n
const { gql } = require('apollo-server-express');\nconst users = require('.\/users');\nconst todos = require('.\/todos');\nconst { GraphQLScalarType } = require('graphql');\nconst { makeExecutableSchema } = require('@graphql-tools\/schema');\nconst typeDefs = gql`\n scalar Time\n type Query {\n getVersion: String!\n }\n type Mutation {\n version: String!\n }\n`;\nconst timeScalar = new GraphQLScalarType({\n name: 'Time',\n description: 'Time custom scalar type',\n serialize: (value) => value,\n});\nconst resolvers = {\n Time: timeScalar,\n Query: {\n getVersion: () => `v1`,\n },\n};\nconst schema = makeExecutableSchema({\n typeDefs: [typeDefs, users.typeDefs, todos.typeDefs],\n resolvers: [resolvers, users.resolvers, todos.resolvers],\n});\nmodule.exports = schema;<\/code><\/pre>\nKode gennemgang<\/h4>\n
Trin 1<\/h5>\n
![\"En](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-1.png\")
Trin 2:<\/h5>\n
makeExecutableSchema<\/code>.<\/p>\n![\"En](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-2.png\")
Oprettelse af Todo-skema<\/h3>\n
const { gql } = require('apollo-server-express');\nconst createTodo = require('.\/mutations\/create-todo');\nconst updateTodo = require('.\/mutations\/update-todo');\nconst removeTodo = require('.\/mutations\/delete-todo');\nconst todo = require('.\/queries\/todo');\nconst todos = require('.\/queries\/todos');\nconst typeDefs = gql`\n type Todo {\n id: ID!\n title: String\n description: String\n user: User\n }\n input CreateTodoInput {\n title: String!\n description: String\n isCompleted: Boolean\n }\n input UpdateTodoInput {\n title: String\n description: String\n isCompleted: Boolean\n } extend type Query {\n todo(id: ID): Todo!\n todos: [Todo!]\n }\n extend type Mutation {\n createTodo(input: CreateTodoInput!): Todo\n updateTodo(id: ID!, input: UpdateTodoInput!): Todo\n removeTodo(id: ID!): Todo\n }\n`;\n\/\/ Provide resolver functions for your schema fields\nconst resolvers = {\n \/\/ Resolvers for Queries\n Query: {\n todo,\n todos,\n },\n \/\/ Resolvers for Mutations\n Mutation: {\n createTodo,\n updateTodo,\n removeTodo,\n },\n};\nmodule.exports = { typeDefs, resolvers };<\/code><\/pre>\nGennemgang af kode<\/h4>\n
Trin 1:<\/h5>\n
type<\/code>, input<\/code> og extend<\/code>. N\u00f8gleordet extend<\/code> bruges til at arve og tilf\u00f8je nye foresp\u00f8rgsler og mutationer til den eksisterende rodforesp\u00f8rgsel og mutation, som vi oprettede ovenfor.<\/p>\n![\"En](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-3.png\")
Trin 2:<\/h5>\n
![\"En](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0.png\")
.\/mutations\/<\/code>, og tilf\u00f8j forretningslogikken for at oprette en ny Todo i din database.<\/p>\nconst models = require('..\/..\/..\/models');\nmodule.exports = async (root, { input }, context) => {\n return models.todos.push({ ...input });\n};<\/code><\/pre>\nOps\u00e6tning og k\u00f8rsel af serveren<\/h3>\n
![\"En](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/new_graphql_playground.png\")