Wat is GraphQL?<\/h2>\n
Uit de offici\u00eble documentatie<\/a>: “GraphQL is een querytaal voor API’s en een runtime voor het vervullen van die query’s met je bestaande gegevens. GraphQL biedt een volledige en begrijpelijke beschrijving van de gegevens in je API, geeft clients de mogelijkheid om precies te vragen wat ze nodig hebben en niets meer, maakt het gemakkelijker om API’s in de loop der tijd te evolueren, en maakt krachtige developertools mogelijk.”<\/p>\n GraphQL is een server-side runtime voor het uitvoeren van query’s met behulp van het type systeem dat je voor je gegevens hebt gedefinieerd. GraphQL is ook niet gebonden aan een specifieke database of opslag-engine. In plaats daarvan wordt het ondersteund door je bestaande code en gegevensopslag. Een gedetailleerde vergelijking van deze technologie\u00ebn vind je in de GraphQL vs. RESTful API gids<\/a>.<\/p>\n Om een GraphQL dienst te maken, begin je met het defini\u00ebren van schema types en het cre\u00ebren van velden die die types gebruiken. Vervolgens geef je een functie-resolver die op elk veld en type wordt uitgevoerd wanneer gegevens door de client worden opgevraagd.<\/p>\n Het GraphQL typesysteem wordt gebruikt om te beschrijven welke gegevens kunnen worden opgevraagd en welke gegevens je kunt manipuleren. Dit is de kern van GraphQL. Laten we verschillende manieren bespreken waarop we gegevens kunnen beschrijven en manipuleren in GraphQ.<\/p>\n GraphQL objecttypen zijn gegevensmodellen die sterk getypeerde velden bevatten. Er moet een 1-op-1 mapping zijn tussen je modellen en GraphQL types. Hieronder staat een voorbeeld van GraphQL Type:<\/p>\n GraphQL Query definieert alle query’s die een klant kan uitvoeren op de GraphQL API. Je moet een Hieronder defini\u00ebren en mappen we de query’s naar de bijbehorende RESTful API:<\/p>\n Als GraphQL Queries We zetten alle mutaties in een enkele Je merkte waarschijnlijk al op dat we Je kunt de invoertypes defini\u00ebren zoals hieronder:<\/p>\n Resolvers vertellen GraphQL wat er moet gebeuren bij het opvragen van een query of mutatie. Het is een basisfunctie die het zware werk doet om de databaselaag aan te spreken om de CRUD (create, read, update, delete) operaties uit te voeren, een intern RESTful API endpoint aan te spreken, of een microservice<\/a> te callen om het verzoek van de client te vervullen.<\/p>\n Je kunt een nieuw resolvers.js<\/strong> bestand maken en de volgende code toevoegen:<\/p>\n GraphQL schema is wat GraphQL blootstelt aan de wereld. Daarom zullen de types, query’s en mutaties in het schema worden opgenomen om aan de wereld te worden blootgesteld.<\/p>\n Hieronder staat hoe je types, queries en mutaties aan de wereld blootstelt:<\/p>\n In het bovenstaande script hebben we de eerder gemaakte GraphQL biedt een implementatie voor alle grote programmeertalen, en Node.js is daar niet van uitgezonderd. Op de offici\u00eble GraphQL website<\/a> is er een sectie voor ondersteuning van JavaScript<\/a>, en ook zijn er andere implementaties van GraphQL om het schrijven en coderen eenvoudig te maken.<\/p>\n GraphQL Apollo biedt een implementatie voor Node.js en Express.js en maakt het eenvoudig om met GraphQL aan de slag te gaan.<\/p>\n In de volgende paragraaf leer je hoe je je eerste GraphQL applicatie in Node.js en Express.js<\/a> backend framework kunt maken en ontwikkelen met GraphQL Apollo..<\/p>\n Het bouwen van een GraphQL API server met Express.js is eenvoudig om mee te beginnen. In deze sectie zullen we onderzoeken hoe je een GraphQL server bouwt.<\/p>\n Eerst moet je een nieuw Express.js project installeren en opzetten. Maak een map aan voor je project en installeer Express.js met dit commando:<\/p>\n Bovenstaand commando maakt een nieuw package.json<\/strong> bestand aan en installeert de Express.js bibliotheek in je project.<\/p>\n Vervolgens gaan we ons project structureren zoals in de afbeelding hieronder. Het zal verschillende modules bevatten voor de functies van het project, zoals gebruikers, todo’s, enz.<\/p>\n Laten we beginnen met het installeren van de GraphQL Express.js dependencies. Voer het volgende commando uit om te installeren:<\/p>\n Vervolgens maken we een bestand index.js<\/strong> aan in de map modules en voegen we het volgende stukje code toe:<\/p>\n Laten we het codefragment doornemen en bij langsgaan:<\/p>\n Eerst hebben we de vereiste bibliotheken ge\u00efmporteerd en standaard query- en mutatietypen aangemaakt. De query en mutatie stellen voorlopig alleen de versie van de GraphQL API in. We zullen de query en mutatie echter uitbreiden met andere schema’s als we verder gaan.<\/p>\n Vervolgens maakten we een nieuw scalar type voor de tijd en onze eerste resolver voor de hierboven gemaakte query en mutatie. Daarnaast hebben we ook een schema gegenereerd met de functie Het gegenereerde schema bevat alle andere schema’s die we importeerden en zal er ook meer bevatten naarmate we ze aanmaken en importeren.<\/p>\n Het bovenstaande codefragment laat zien dat we verschillende schema’s hebben ge\u00efmporteerd in de makeExecutableSchema functie. Deze aanpak helpt ons bij het structureren van de applicatie met het oog op complexiteit. Vervolgens gaan we de ge\u00efmporteerde Todo en User schema’s aanmaken.<\/p>\n Het Todo schema toont eenvoudige CRUD operaties die gebruikers van de applicatie kunnen uitvoeren. Hieronder staat het schema dat de Todo CRUD operatie implementeert.<\/p>\n Laten we het codefragment doornemen:<\/p>\n Eerst hebben we een schema gemaakt voor onze Todo met GraphQL Vervolgens hebben we een resolver gemaakt, die wordt gebruikt om de juiste gegevens op te halen als een bepaalde query of mutatie wordt gecalld.<\/p>\n Met de nu ingestelde resolverfunctie kunnen we individuele methoden maken voor de bedrijfslogica en database-manipulatie, zoals te zien is in het create-todo.js<\/strong> voorbeeld.<\/p>\n Maak een bestand create-user.js<\/strong> in de map Het bovenstaande codefragment is een vereenvoudigde manier om een nieuwe Todo in onze database aan te maken met behulp van de Sequelize ORM. Je kunt meer leren over Sequelize en hoe je het instelt met Node.js<\/a>.<\/p>\n Je kunt dezelfde stap volgen om vele schema’s te maken, afhankelijk van je applicatie, of je kunt het complete project klonen van GitHub<\/a>.<\/p>\n Vervolgens gaan we de server opzetten met Express.js en de nieuw gemaakte Todo applicatie draaien met GraphQL en Node.js.<\/p>\nGraphQL terminologie<\/h2>\n
Objecttypen<\/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>\nQuery’s<\/h3>\n
RootQuery<\/code> defini\u00ebren die volgens afspraak alle bestaande query’s bevat.<\/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>\nMutaties<\/h3>\n
GET<\/code> verzoeken zijn, dan zijn mutaties POST<\/code>, PUT<\/code>, PATCH<\/code>, en DELETE<\/code> verzoeken die de GraphQL API manipuleren.<\/p>\nRootMutation<\/code> om te demonstreren:<\/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> types gebruiken voor de mutaties, zoals UserInput<\/code>, TodoInput<\/code><\/code> . Het is altijd een best practice om altijd Input types te defini\u00ebren bij het maken en updaten van je resources.<\/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> en RootMutation<\/code> opgenomen om te exposen.<\/p>\nHoe werkt GraphQL met Node.js en Express.js?<\/h2>\n
GraphQL opzetten met Express.js<\/h2>\n
Project initialiseren met Express<\/h3>\n
cd <project-name> && npm init -y\nnpm install express<\/code><\/pre>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/graphql-todo-structrue.png\")
GraphQL initialiseren<\/h3>\n
npm install apollo-server-express graphql @graphql-tools\/schema --save<\/code><\/pre>\nSchema’s en types aanmaken<\/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>\nUitleg code<\/h4>\n
Stap 1<\/h5>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-1.png\")
Stap 2:<\/h5>\n
makeExecutableSchema<\/code>.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-2.png\")
Todo schema maken<\/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>\nUitleg code<\/h4>\n
Stap 1:<\/h5>\n
type<\/code>, input<\/code>, en extend<\/code>. Het keyword extend<\/code> wordt gebruikt om nieuwe query’s en mutaties te inheriten en toe te voegen aan de bestaande hoofdquery en mutatie die we hierboven hebben gemaakt.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0-3.png\")
Stap 2:<\/h5>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pasted-image-0.png\")
.\/mutations<\/code> en voeg de bedrijfslogica toe om een nieuwe Todo in je database aan te maken.<\/p>\nconst models = require('..\/..\/..\/models');\nmodule.exports = async (root, { input }, context) => {\n return models.todos.push({ ...input });\n};<\/code><\/pre>\nInstellen en draaien van de server<\/h3>\n
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/new_graphql_playground.png\")