GraphQL - Contoh

Di bab ini, kita akan membuat API sederhana yang mengembalikan pesan ucapan, HelloWorld, dan mengaksesnya menggunakan GraphiQL.

Contoh

Contoh ini didasarkan pada server NodeJS, Express, dan Apollo. Kita akan belajar menggabungkan semua konsep dengan langkah-langkah berikut -

Langkah 1 - Menyiapkan Express

ExpressJS adalah kerangka aplikasi web yang membantu membangun situs web dan aplikasi web. Dalam contoh ini, kami akan membangun API GraphQL di atas kerangka Express.

Langkah selanjutnya adalah membuat folder hello-world-serverdan arahkan ke folder yang sama dari terminal. Tambahkan package.json, dan beri nama pada paket tersebut. Karena paket ini hanya digunakan secara internal, kami dapat mendeklarasikannya sebagai pribadi.

{
   "name":"hello-world-server",
   "private":true
}

Instal dependensi untuk server Express seperti yang ditunjukkan di bawah ini -

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parser adalah paket middleware yang membantu Express menangani permintaan HTTP Post secara efisien. cors adalah paket middleware lain yang menangani berbagi sumber daya lintas sumber.

Membuat server.js file dalam folder proyek dan ketikkan yang berikut di dalamnya -

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 9000
   const app = express()
   
   //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is up and running at ${port}`)

Untuk memverifikasi apakah server Express aktif dan berjalan, jalankan kode berikut di jendela terminal -

C:\Users\Admin\hello-world-server>node server.js

Output berikut ditampilkan di konsol server. Ini menunjukkan bahwa server ekspres berjalan pada port 9000.

server is up and running at 9000

Jika Anda membuka browser dan mengetik http://localhost:9000, Anda akan mendapatkan layar berikut -

Untuk menghentikan server, tekan Ctrl + C.

Langkah 2 - Instal GraphQL dan Apollo Server

Sekarang Express telah dikonfigurasi, langkah selanjutnya adalah mengunduh dependensi GraphQL berikut -

graphql
graphql-tools
apollo-server-express@1

Kami akan menggunakan server Apollo v1.0 karena ini adalah rilis stabil. Ketik perintah berikut untuk menginstal dependensi ini -

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

Kami dapat memverifikasi apakah dependensi ini berhasil diinstal dengan memeriksa package.json file yang kita buat sebelumnya.

{
   "name": "hello-world-server",
   "private": true,
   
   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.18.3",
      "cors": "^2.8.4",
      "express": "^4.16.3",
      "graphql": "^0.13.2",
      "graphql-tools": "^3.1.1"
   }
}

Langkah 3 - Tentukan Skema

Skema GraphQL menentukan jenis objek apa yang dapat diambil dari layanan, dan bidang apa yang dimilikinya. Skema dapat ditentukan menggunakanGraphQL Schema Definition Language. Sekarang, tambahkan potongan kode berikut diserver.js file -

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

Di sini, kueri berisi atribut salam yang mengembalikan nilai string .

Langkah 4 - Buat Pemecah Masalah

Langkah pertama dalam membuat resolver adalah menambahkan beberapa kode untuk memproses permintaan bidang salam. Ini ditentukan dalam aresolver. Struktur fungsi resolver harus sesuai dengan skema. Tambahkan cuplikan kode berikut diserver.js mengajukan.

// Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}

Langkah kedua adalah mengikat skema dan resolver menggunakan makeExecutableSchema. Fungsi ini telah ditentukan sebelumnya dalam modul graphql-tools. Tambahkan cuplikan kode berikut di server.js mengajukan.

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

Langkah 5 - Tentukan Rute untuk Mengambil Data dari Aplikasi ReactJS / GraphiQL

Tambahkan cuplikan kode berikut di server.js file -

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

   //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))
   
   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

Fungsi graphqlExpress membantu mendaftarkan rutehttp://localhost:9000/graphql. Aplikasi ReactJS dapat menggunakan titik akhir ini untuk melakukan kueri data. Demikian pula, fungsi graphqliExpress membantu mendaftarkan rutehttp://localhost:9000/graphiql. Ini akan digunakan oleh klien browser GraphiQL untuk menguji API.

Kode server.js lengkap seperti yang diberikan di bawah ini -

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}
const {makeExecutableSchema} = require('graphql-tools')

const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

Langkah 6 - Mulai Aplikasi

Menjalankan server.js menggunakan Node.js sebagai berikut -

C:\Users\Admin\hello-world-server>node server.js

Langkah 7 - Uji API GraphQL

Buka browser dan ketik http://localhost:9000/graphiql. Di tab kueri GraphiQL, masukkan berikut ini -

{
   greeting
}

Tanggapan dari server diberikan di bawah ini -

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!"
   }
}

Gambar berikut mengilustrasikan respons -

Note - Harap pastikan bahwa Apollo Server Versi 1.0 digunakan.