Membuat GraphQL Server Menggunakan Node JS Dan Express
GraphQL adalah bahasa yang memungkinkan Anda memberikan deskripsi data yang lengkap dan mudah dipahami di API Anda. Selain itu, client dapat meminta apa yang mereka butuhkan. Situs web project dapat ditemukan di http://graphql.org/
GraphQL memiliki beberapa keunggulan
GraphQL bersifat deklaratif: Respons query ditentukan oleh client, bukan server. query GraphQL mengembalikan persis apa yang diminta client, tidak lebih.
GraphQL konstruktif: query GraphQL itu sendiri adalah kumpulan bidang hierarkis. query dibentuk seperti data yang dikembalikan. Ini adalah cara alami bagi insinyur produk untuk menjelaskan persyaratan data mereka.
GraphQL diketik dengan kuat: query GraphQL dijamin valid dalam sistem tipe GraphQL pada waktu pengembangan, memungkinkan server untuk menjamin respons. Ini membuatnya mudah untuk membangun alat client berkualitas tinggi.
Dalam tutorial ini Anda akan belajar cara mengatur GraphQL server menggunakan Node.js dan Express. Contoh ini menggunakan Express middleware express-graphql. Selain itu, Anda akan mempelajari cara menggunakan GraphQL di sisi client untuk mengirim query dan mutasi ke server.
Mari Kita mulai …
Pengaturan project
Untuk menyiapkan GraphQL server Node.js Anda, mulailah dengan membuat folder project kosong baru.
$ mkdir gql-server
Buka direktori itu dan jalankan perintah NPM berikut untuk memulai file package.json baru.
$ npm init
Selain itu, buat file server.js baru di direktori project Anda. Ini akan menjadi file tempat kode yang diperlukan untuk mengimplementasikan server Node.js GraphQL akan dimasukkan di bagian selanjutnya.
$ touch server.js
Terakhir, pastikan bahwa paket NPM graphql, express, dan express-graphql telah ditambahkan ke project Anda.
$ npm install graphql express express-graphql —save
Sekarang paket-paket ini telah berhasil diinstal, Anda siap untuk mengimplementasikan GraphQL server pertama Anda.
Membuat GraphQL server dasar menggunakan Express
Sekarang setelah Anda siap untuk menyiapkan project Anda, mari masukkan kode JS berikut ke server.js untuk membuat implementasi server pertama kami.
var express = require('express');
var express_graphql = require('express-graphql');
var { buildSchema } = require('graphql');// GraphQL schema
var schema = buildSchema(`
type Query {
message: String
}
`);// Root resolver
var root = {
message: () => 'Hello World!'
};// Create an express server and a GraphQL endpoint
var app = express();
app.use('/graphql', express_graphql({
schema: schema,
rootValue: root,
graphiql: true
}));
app.listen(4000, () => console.log('Express GraphQL Server Now Running On localhost:4000/graphql'));
Pada awalnya kami memastikan bahwa express, express-graphql dan fungsi buildSchema dari paket graphql diimpor Selanjutnya kita membuat skema GraphQL sederhana dengan menggunakan fungsi buildSchema.
Untuk membuat skema, kami memanggil fungsi dan menambahkan string yang berisi kode IDL (GraphQL Interface Definition Language) yang digunakan untuk menggambarkan skema Skema GraphQL digunakan untuk menggambarkan sistem tipe API yang lengkap Setiap kali client membuat panggilan API, panggilan divalidasi terhadap skema. jika validasi berhasil, tindakan dijalankan. Jika tidak, kesalahan dikembalikan.
Selanjutnya sebuah root resolver dibuat Resolver berisi tindakan ke fungsi. Dalam contoh kami dari atas, penyelesai akar hanya berisi satu tindakan: pesan. Untuk mempermudah, fungsi yang ditetapkan hanya mengembalikan string fungsi resolver yang berbeda.
Akhirnya server Express dibuat dengan titik akhir GraphQL: /graphql Untuk membuat titik akhir GraphQL terlebih dahulu, instance ekspres baru disimpan di app. Selanjutnya metode app.use dipanggil dan dua parameter disediakan:
- Pertama titik akhir URL sebagai string
- Kedua, hasil dari fungsi express_graphql diserahkan. Objek konfigurasi panggilan express_graphql yang berisi tiga properti
Tiga properti konfigurasi yang digunakan untuk middleware Express GraphQL adalah sebagai berikut:
- skema: Skema GraphQL yang harus dilampirkan ke titik akhir tertentu
- rootValue: Penyelesai root objek
- graphiql: Harus disetel ke true untuk mengaktifkan alat GraphiQL saat mengakses titik akhir di browser GraphiQL adalah IDE GraphQL dalam browser interaktif grafis Dengan menggunakan alat ini Anda dapat langsung menulis pertanyaan Anda di browser dan mencoba titik
Akhirnya app.listen dipanggil untuk memulai proses server pada port 4000.
Server Node.js dapat dimulai dengan menjalankan perintah berikut di direktori project:
$ node server.js
Anda akan melihat output ketika Anda memulai proses server.
Server Express GraphQL berjalan di localhost:4000/graphql
Di baris perintah. Jika Anda mengakses localhost:4000/graphql di browser Anda, Anda akan melihat hasil berikut:
Di editor query, masukkan kode berikut:
{
message
}
Kemudian tekan tombol Run Query dan Anda akan melihat hasil berikut:
Implementasi contoh yang lebih canggih
Sekarang setelah Anda memahami dasar-dasar cara mengimplementasikan GraphQL server menggunakan Node.js dan Express, mari kita lanjutkan dengan contoh yang lebih canggih. Tambahkan file JS baru ke project Anda.
$ touch server2.js
Selanjutnya, mari tambahkan implementasi berikut.
var express = require('express');
var express_graphql = require('express-graphql');
var { buildSchema } = require('graphql');// GraphQL schema
var schema = buildSchema(`
type Query {
course(id: Int!): Course
courses(topic: String): [Course]
},
type Course {
id: Int
title: String
author: String
description: String
topic: String
url: String
}
`);var coursesData = [
{
id: 1,
title: 'The Complete Node.js Developer Course',
author: 'Andrew Mead, Rob Percival',
description: 'Learn Node.js by building real-world applications with Node, Express, MongoDB, Mocha, and more!',
topic: 'Node.js',
url: 'https://codingthesmartway.com/courses/nodejs/'
},
{
id: 2,
title: 'Node.js, Express & MongoDB Dev to Deployment',
author: 'Brad Traversy',
description: 'Learn by example building & deploying real-world Node.js applications from absolute scratch',
topic: 'Node.js',
url: 'https://codingthesmartway.com/courses/nodejs-express-mongodb/'
},
{
id: 3,
title: 'JavaScript: Understanding The Weird Parts',
author: 'Anthony Alicea',
description: 'An advanced JavaScript course for everyone! Scope, closures, prototypes, this, build your own framework, and more.',
topic: 'JavaScript',
url: 'https://codingthesmartway.com/courses/understand-javascript/'
}
]var getCourse = function(args) {
var id = args.id;
return coursesData.filter(course => {
return course.id == id;
})[0];
}var getCourses = function(args) {
if (args.topic) {
var topic = args.topic;
return coursesData.filter(course => course.topic === topic);
} else {
return coursesData;
}
}var root = {
course: getCourse,
courses: getCourses
};// Create an express server and a GraphQL endpoint
var app = express();
app.use('/graphql', express_graphql({
schema: schema,
rootValue: root,
graphiql: true
}));
app.listen(4000, () => console.log('Express GraphQL Server Now Running On localhost:4000/graphql'));
Mari kita lihat kodenya selangkah demi selangkah. Pertama, tentukan skema yang terdiri dari Kursus jenis kustom dan dua tindakan query.
Jenis objek Kursus terdiri dari total 6 properti. Tindakan query yang ditentukan memungkinkan pengguna untuk mendapatkan satu kursus dengan ID atau larik objek kursus dalam topik kursus.
Kami telah mendefinisikan array CourseData yang berisi data kursus dummy sehingga kami dapat mengembalikan data tanpa terhubung ke database.
Penyelesai akar menghubungkan tindakan query kursus ke fungsi getCourse dan tindakan query kursus ke fungsi getCourses. Akses ke GraphQL API
Kemudian mulai lagi proses server Node.js dan jalankan kode dari file server2.js menggunakan perintah berikut:
$ node server2.js
query getSingleCourse($courseID: Int!) {
course(id: $courseID) {
title
author
description
topic
url
}
}
Operasi query getSingleCourse perlu mendapatkan satu parameter, $ courseID dari tipe Int. Tanda seru digunakan untuk menentukan bahwa parameter ini harus ditentukan.
Dalam getSingleCourse, saya menjalankan query kursus untuk ID khusus ini. Menentukan untuk mendapatkan judul, penulis, deskripsi, topik, dan URL untuk kursus tertentu.
Operasi query getSingleCourse menggunakan parameter dinamis, jadi Anda juga harus menentukan nilai untuk parameter ini di bidang masukan Variabel query.
{
"courseID":1
}
Klik tombol Run dan Anda akan melihat hasil sebagai berikut:
Menggunakan alias dan fragmen
Operasi query dapat berisi beberapa query. Dalam contoh berikut, operasi query getCourseWithFragments berisi dua query kursus tunggal. Kami telah menetapkan alias untuk membedakan antara kedua query: course1 dan course2.
query getCourseWithFragments($courseID1: Int!, $courseID2: Int!) {
course1: course(id: $courseID1) {
...courseFields
},
course2: course(id: $courseID2) {
...courseFields
}
}fragment courseFields on Course {
title
author
description
topic
url
}
Seperti yang Anda lihat, operasi query memerlukan dua parameter, courseID1 dan courseID2. ID pertama digunakan untuk query pertama dan ID kedua digunakan untuk query kedua.
Fitur lain yang digunakan adalah fragmen. Fragmen dapat digunakan untuk menghindari pengulangan kumpulan bidang yang sama dalam beberapa query. Sebagai gantinya, tentukan fragmen yang dapat digunakan kembali dengan nama courseFields dan identifikasi bidang yang terkait dengan kedua query di satu tempat.
Anda harus menetapkan nilai ke parameter sebelum Anda dapat melakukan operasi query.
{
"courseID1":1,
"courseID2":2
}
Hasilnya adalah sebagai berikut:
Membuat dan menggunakan mutasi
Sejauh ini, kita hanya melihat contoh pengambilan data dari GraphQL server. Anda juga dapat mengubah data menggunakan GraphQL. Dengan menggunakan mutasi. Untuk dapat menggunakan mutasi tanpa GraphQL server, Anda harus terlebih dahulu menambahkan kode ke implementasi server server2.js Anda.
// GraphQL schema
var schema = buildSchema(`
type Query {
course(id: Int!): Course
courses(topic: String): [Course]
},
type Mutation {
updateCourseTopic(id: Int!, topic: String!): Course
}
type Course {
id: Int
title: String
author: String
description: String
topic: String
url: String
}
`);
Di sini Anda dapat melihat bahwa skema juga berisi tipe Mutasi. Mutasi yang ditentukan diberi nama updateCourseTopic dan mengambil dua parameter yang diperlukan, id dan topik. Jenis kembalinya mutasi adalah Course.
Seharusnya dimungkinkan untuk menggunakan mutasi itu untuk mengubah topik kursus tertentu. Seperti query sebelumnya, kami menetapkan fungsi ke mutasi root resolver. Fungsi ini diimplementasikan menggunakan logika pembaruan yang sesuai.
var updateCourseTopic = function({id, topic}) {
coursesData.map(course => {
if (course.id === id) {
course.topic = topic;
return course;
}
});
return coursesData.filter(course => course.id === id) [0];
}var root = {
course: getCourse,
courses: getCourses,
updateCourseTopic: updateCourseTopic
};
Sekarang server dapat menangani mutasi juga, coba lagi dengan antarmuka browser GraphQL.
Operasi mutasi didefinisikan menggunakan kata kunci mutasi diikuti dengan nama operasi mutasi. Dalam contoh berikut, mutasi updateCourseTopic disertakan dalam operasi, sekali lagi menggunakan fragmen courseFields.
mutation updateCourseTopic($id: Int!, $topic: String!) {
updateCourseTopic(id: $id, topic: $topic) {
... courseFields
}
}
Karena operasi mutasi menggunakan dua variabel dinamis, Anda perlu menetapkan nilai ke bidang input variabel query sebagai berikut:
{
"id": 1,
"topic": "JavaScript"
}
Melakukan mutasi ini mengubah nilai properti topik dari kumpulan data kursus dengan ID1 dari Node.js ke JavaScript. Akibatnya, kursus yang dimodifikasi dikembalikan.
Kesimpulan
GraphQL memberikan deskripsi data yang lengkap dan mudah dipahami di API, memungkinkan client untuk meminta apa yang mereka butuhkan. Dalam tutorial ini Anda belajar bagaimana mengimplementasikan GraphQL server Anda sendiri menggunakan Node.js dan Express. Dengan menggunakan Express middleware express-graphql, pengaturan GraphQL server sangat mudah dan hanya membutuhkan beberapa baris kode. Jika Anda ingin tahu lebih banyak tentang bahasa GraphQL, periksa juga http://graphql.org/learn.