Vad \u00e4r GraphQL?<\/h2>\n
Det st\u00e5r i den officiella dokumentationen<\/a>: ”GraphQL \u00e4r ett s\u00f6kfr\u00e5gespr\u00e5k f\u00f6r API: er och en k\u00f6rtid f\u00f6r att uppfylla dessa fr\u00e5gor med dina befintliga data. GraphQL ger en fullst\u00e4ndig och begriplig beskrivning av data i ditt API, ger kunderna m\u00f6jlighet att endast fr\u00e5ga efter exakt vad de beh\u00f6ver, g\u00f6r det l\u00e4ttare att utveckla API: er \u00f6ver tiden och m\u00f6jligg\u00f6r kraftfulla utvecklarverktyg.”<\/p>\n GraphQL \u00e4r en serverbaserad k\u00f6rtid f\u00f6r att utf\u00f6ra s\u00f6kfr\u00e5gor med hj\u00e4lp av det typsystem som du har definierat f\u00f6r dina data. GraphQL \u00e4r inte heller bundet till n\u00e5gon specifik databas eller lagringsmotor. Den st\u00f6ds ist\u00e4llet av din befintliga kod och datalagret. Du kan f\u00e5 en detaljerad j\u00e4mf\u00f6relse av dessa tekniker i guiden GraphQL vs. RESTful API<\/a>.<\/p>\n F\u00f6r att skapa en GraphQL-tj\u00e4nst s\u00e5 b\u00f6rjar du med att definiera schematyper och skapa f\u00e4lt som anv\u00e4nder dessa typer. D\u00e4refter s\u00e5 tillhandah\u00e5ller du en funktions-resolver som ska utf\u00f6ras p\u00e5 varje f\u00e4lt och typ n\u00e4r data beg\u00e4rs av klientsidan.<\/p>\n GraphQL-typsystemet anv\u00e4nds f\u00f6r att beskriva vilka data som kan fr\u00e5gas ut och vilka data som du kan manipulera. Det \u00e4r k\u00e4rnan i GraphQL. L\u00e5t oss diskutera olika s\u00e4tt att beskriva och manipulera data i GraphQL.<\/p>\n GraphQL-objekttyper \u00e4r datamodeller som inneh\u00e5ller starkt typade f\u00e4lt. Det b\u00f6r finnas en 1 till 1-mappning mellan dina modeller och GraphQL-typerna. Nedan finns ett exempel p\u00e5 en GraphQL-typ:<\/p>\n GraphQL Query definierar alla s\u00f6kfr\u00e5gor som en klient kan k\u00f6ra p\u00e5 GraphQL API. Du b\u00f6r definiera en Nedan definierar och mappar vi fr\u00e5gorna till motsvarande RESTful API:<\/p>\n Om GraphQL-f\u00f6rfr\u00e5gningar \u00e4r Vi kommer att placera alla mutationer i en enda Du har noterat anv\u00e4ndningen av Du kan definiera inmatningstyperna p\u00e5 f\u00f6ljande s\u00e4tt:<\/p>\n Resolvers talar om f\u00f6r GraphQL vad de ska g\u00f6ra n\u00e4r varje s\u00f6kfr\u00e5ga eller mutation beg\u00e4rs. Det \u00e4r en grundl\u00e4ggande funktion som g\u00f6r det h\u00e5rda arbetet med att sl\u00e5 p\u00e5 databaslagret f\u00f6r att g\u00f6ra CRUD-operationer (skapa, l\u00e4sa, uppdatera, ta bort), sl\u00e5 p\u00e5 en intern RESTful API-slutpunkt eller anropa en mikrotj\u00e4nst<\/a> f\u00f6r att uppfylla klientens beg\u00e4ran.<\/p>\n Du kan skapa en ny resolvers.js<\/strong>-fil och l\u00e4gga till f\u00f6ljande kod:<\/p>\n GraphQL-schema \u00e4r det som GraphQL exponerar f\u00f6r v\u00e4rlden. Av den anledningen s\u00e5 kommer typer, s\u00f6kfr\u00e5gor och mutationer att ing\u00e5 i schemat f\u00f6r att exponeras f\u00f6r v\u00e4rlden.<\/p>\n Nedan beskrivs hur man exponerar typer, s\u00f6kfr\u00e5gor och mutationer f\u00f6r v\u00e4rlden:<\/p>\n I ovanst\u00e5ende skript s\u00e5 har vi inkluderat GraphQL tillhandah\u00e5ller en implementering f\u00f6r alla st\u00f6rre programmeringsspr\u00e5k, och Node.js \u00e4r inte undantaget. P\u00e5 den officiella GraphQL-webbplatsen<\/a> s\u00e5 finns det en sektion f\u00f6r JavaScript-st\u00f6d<\/a>, och det finns \u00e4ven andra implementeringar av GraphQL f\u00f6r att g\u00f6ra det enkelt att skriva och koda.<\/p>\n GraphQL Apollo tillhandah\u00e5ller en implementering f\u00f6r Node.js och Express.js och g\u00f6r det enkelt att komma ig\u00e5ng med GraphQL.<\/p>\n In\u00e4sta avsnitt s\u00e5 kommer du att l\u00e4ra dig hur du skapar och utvecklar din f\u00f6rsta GraphQL-applikation i Node.js och Express.js<\/a> backend-ramverk med hj\u00e4lp av GraphQL Apollo.<\/p>\n Att bygga en GraphQL API-server med Express.js \u00e4r enkelt. I det h\u00e4r avsnittet s\u00e5 kommer vi att utforska hur man bygger en GraphQL-server.<\/p>\n F\u00f6rst s\u00e5 m\u00e5ste du installera och st\u00e4lla in ett nytt Express.js-projekt. Skapa en mapp f\u00f6r ditt projekt och installera Express.js med det h\u00e4r kommandot:<\/p>\n Kommandot ovan skapar en ny package.json<\/strong>-fil och installerar Express.js-biblioteket i ditt projekt.<\/p>\n D\u00e4refter s\u00e5 strukturerar vi v\u00e5rt projekt enligt bilden nedan. Det kommer att inneh\u00e5lla olika moduler f\u00f6r projektets funktioner som t.ex. anv\u00e4ndare, todos osv.<\/p>\n L\u00e5t oss b\u00f6rja med att installera GraphQL Express.js-beroendena. K\u00f6r f\u00f6ljande kommando f\u00f6r att installera:<\/p>\n D\u00e4refter s\u00e5 ska vi skapa en index.js<\/strong>-fil i mappen modules och l\u00e4gga till f\u00f6ljande kodutdrag:<\/p>\n Vi g\u00e5r igenom kodutdraget och bryter ner det:<\/p>\n F\u00f6rst s\u00e5 importerade vi de n\u00f6dv\u00e4ndiga biblioteken och skapade standardtyper f\u00f6r s\u00f6kfr\u00e5gor och mutationer. F\u00f6rfr\u00e5gan och mutationen anger f\u00f6r tillf\u00e4llet bara versionen av GraphQL API :et. Vi kommer dock att ut\u00f6ka f\u00f6rfr\u00e5gan och mutationen f\u00f6r att inkludera andra scheman allteftersom vi forts\u00e4tter.<\/p>\n D\u00e4refter s\u00e5 skapade vi en ny skal\u00e4r typ f\u00f6r tid och v\u00e5r f\u00f6rsta resolver f\u00f6r den s\u00f6kfr\u00e5ga och mutation som skapats ovan. Vi genererade dessutom \u00e4ven ett schema med hj\u00e4lp av funktionen Det genererade schemat inkluderar alla andra scheman som vi importerade och kommer \u00e4ven att inneh\u00e5lla fler n\u00e4r vi skapar och importerar dem.<\/p>\n Ovanst\u00e5ende kodutdrag visar att vi importerade olika scheman till funktionen makeExecutableSchema. Detta tillv\u00e4gag\u00e5ngss\u00e4tt hj\u00e4lper oss att strukturera applikationen f\u00f6r komplexitet. D\u00e4refter s\u00e5 ska vi skapa de Todo- och User-scheman som vi importerade.<\/p>\n Todo-schemat visar enkla CRUD-operationer som applikationens anv\u00e4ndare kan utf\u00f6ra. Nedan visas schemat som implementerar Todo CRUD-operationen.<\/p>\n L\u00e5t oss g\u00e5 igenom kodutdraget och bryta ner det:<\/p>\n F\u00f6rst s\u00e5 skapade vi ett schema f\u00f6r v\u00e5r Todo med hj\u00e4lp av GraphQL D\u00e4refter s\u00e5 skapade vi en resolver, som anv\u00e4nds f\u00f6r att h\u00e4mta r\u00e4tt data n\u00e4r en viss s\u00f6kfr\u00e5ga eller mutation anropas.<\/p>\n Med resolver-funktionen p\u00e5 plats s\u00e5 kan vi skapa enskilda metoder f\u00f6r aff\u00e4rslogiken och databasmanipulationen som visas i exemplet create-todo.js<\/strong>.<\/p>\n Skapa filen create-user.js<\/strong> i mappen Kodutdraget ovan \u00e4r ett f\u00f6renklat s\u00e4tt att skapa en ny Todo i v\u00e5r databas med hj\u00e4lp av Sequelize ORM. Du kan l\u00e4sa mer om Sequelize och hur du konfigurerar det med Node.js<\/a>.<\/p>\n Du kan f\u00f6lja samma steg f\u00f6r att skapa m\u00e5nga scheman beroende p\u00e5 din applikation eller s\u00e5 kan du klona hela projektet fr\u00e5n GitHub<\/a>.<\/p>\n D\u00e4refter s\u00e5 ska vi konfigurera servern med Express.js och k\u00f6ra den nyskapade Todo-applikationen med GraphQL och Node.js.<\/p>\nTerminologi f\u00f6r GraphQL<\/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>\nS\u00f6kfr\u00e5gor<\/h3>\n
RootQuery<\/code> som inkluderar alla befintliga s\u00f6kfr\u00e5gor enligt konventionen.<\/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>\nMutationer<\/h3>\n
GET<\/code> -f\u00f6rfr\u00e5gningar s\u00e5 \u00e4r mutationerna POST<\/code>, PUT<\/code>, PATCH<\/code> och DELETE<\/code> -f\u00f6rfr\u00e5gningar som manipulerar GraphQL API.<\/p>\nRootMutation<\/code> f\u00f6r att demonstrera detta:<\/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 f\u00f6r mutationerna, t.ex. UserInput<\/code>, TodoInput<\/code>. Det \u00e4r alltid b\u00e4st att alltid definiera Input-typer f\u00f6r att skapa och uppdatera dina resurser.<\/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> och RootMutation<\/code> som vi skapade tidigare f\u00f6r att de ska exponeras f\u00f6r omv\u00e4rlden.<\/p>\nHur fungerar GraphQL med Node.js och Express.js?<\/h2>\n
Konfigurera GraphQL med Express.js<\/h2>\n
Initialisera projektet med Express<\/h3>\n
cd <project-name> && npm init -y\nnpm install express<\/code><\/pre>\n![\"Filer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/graphql-todo-structrue.png\")
Initialisera GraphQL<\/h3>\n
npm install apollo-server-express graphql @graphql-tools\/schema --save<\/code><\/pre>\nSkapa scheman och 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>\nKodgenomg\u00e5ng<\/h4>\n
Steg 1<\/h5>\n
![\"Import](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-1.png\")
Steg 2:<\/h5>\n
makeExecutableSchema<\/code>.<\/p>\n![\"Skapa](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-2.png\")
Skapa Todo-schema<\/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>\nGenomg\u00e5ng av koden<\/h4>\n
Steg 1:<\/h5>\n
type<\/code>, input<\/code> och extend<\/code>. Nyckelordet extend<\/code> anv\u00e4nds f\u00f6r att \u00e4rva och l\u00e4gga till nya s\u00f6kfr\u00e5gor och mutationer till den befintliga rotfr\u00e5gan och mutationen som vi skapade ovan.<\/p>\n![\"Skapa](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-3.png\")
Steg 2:<\/h5>\n
![\"Skapa](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0.png\")
.\/mutations\/<\/code> och l\u00e4gg till aff\u00e4rslogiken f\u00f6r att skapa en ny Todo i din databas.<\/p>\nconst models = require('..\/..\/..\/models');\nmodule.exports = async (root, { input }, context) => {\n return models.todos.push({ ...input });\n};<\/code><\/pre>\nKonfigurera och k\u00f6ra servern<\/h3>\n
![\"Verifieringssk\u00e4rmen.\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/new_graphql_playground.png\")