GraphQL - Pengaturan Lingkungan

Pada bab ini, kita akan belajar tentang pengaturan lingkungan untuk GraphQL. Untuk menjalankan contoh dalam tutorial ini, Anda memerlukan yang berikut ini -

Komputer yang menjalankan Linux, macOS, atau Windows.
Peramban web, sebaiknya versi terbaru Google Chrome.
Versi terbaru Node.js telah diinstal. Versi LTS terbaru direkomendasikan.
Visual Studio Code dengan ekstensi GraphQL untuk VSCode diinstal atau editor kode pilihan Anda.

Cara Membangun server GraphQL dengan Nodejs

Kami akan melalui pendekatan langkah-bijak terperinci untuk membangun server GraphQL dengan Nodejs seperti yang ditunjukkan di bawah ini -

Langkah 1 - Verifikasi Versi Node dan Npm

Setelah menginstal NodeJs, verifikasi versi node dan npm menggunakan perintah berikut di terminal -

C:\Users\Admin>node -v
v8.11.3

C:\Users\Admin>npm -v
5.6.0

Langkah 2 - Buat Folder Proyek dan Buka di VSCode

Folder akar proyek dapat diberi nama sebagai aplikasi uji.

Buka folder menggunakan editor kode studio visual dengan menggunakan petunjuk di bawah ini -

C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.

Langkah 3 - Buat package.json dan Instal Dependensi

Buat file package.json yang akan berisi semua dependensi aplikasi server GraphQL.

{
   "name": "hello-world-server",
   "private": true,
   "scripts": {
      "start": "nodemon --ignore data/ server.js"
   },
   
   "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"
   },
   
   "devDependencies": {
      "nodemon": "1.17.1"
   }
}

Instal dependensi dengan menggunakan perintah seperti yang diberikan di bawah ini -

C:\Users\Admin\test-app>npm install

Langkah 4 - Buat Database File Datar di Folder Data

Pada langkah ini, kami menggunakan file datar untuk menyimpan dan mengambil data. Buat data folder dan tambahkan dua filestudents.json dan colleges.json.

Berikut ini adalah colleges.json file -

[
   {
      "id": "col-101",
      "name": "AMU",
      "location": "Uttar Pradesh",
      "rating":5.0
   },
   
   {
      "id": "col-102",
      "name": "CUSAT",
      "location": "Kerala",
      "rating":4.5
   }
]

Berikut ini adalah students.json file -

[
   {
      "id": "S1001",
      "firstName":"Mohtashim",
      "lastName":"Mohammad",
      "email": "[email protected]",
      "password": "pass123",
      "collegeId": "col-102"
   },
   
   {
      "id": "S1002",
      "email": "[email protected]",
      "firstName":"Kannan",
      "lastName":"Sudhakaran",
      "password": "pass123",
      "collegeId": "col-101"
   },
   
   {
      "id": "S1003",
      "email": "[email protected]",
      "firstName":"Kiran",
      "lastName":"Panigrahi",
      "password": "pass123",
      "collegeId": "col-101"
   }
]

Langkah 5 - Buat Lapisan Akses Data

Kita perlu membuat datastore yang memuat konten folder data. Dalam hal ini, diperlukan variabel kumpulan, mahasiswa dan perguruan tinggi . Kapanpun aplikasi membutuhkan data, itu menggunakan variabel koleksi ini.

Buat file db.js dengan dalam folder proyek sebagai berikut -

const { DataStore } = require('notarealdb');

const store = new DataStore('./data');

module.exports = {
   students:store.collection('students'),
   colleges:store.collection('colleges')
};

Langkah 6 - Buat File Skema, schema.graphql

Buat file skema di folder proyek saat ini dan tambahkan konten berikut -

type Query  {
   test: String
}

Langkah 7 - Buat File Penyelesai, resolvers.js

Buat file resolver di folder proyek saat ini dan tambahkan konten berikut -

const Query = {
   test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}

Langkah 8 - Buat Server.js dan Konfigurasi GraphQL

Buat file server dan konfigurasikan GraphQL sebagai berikut -

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');

const port = process.env.PORT || 9000;
const app = express();

const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')

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

app.use(cors(), bodyParser.json());

const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

app.listen(
   port, () => console.info(
      `Server started on port ${port}`
   )
);

Langkah 9 - Jalankan Aplikasi dan Uji dengan GraphiQL

Verifikasi struktur folder project test-app sebagai berikut -

test-app /
   -->package.json
   -->db.js
   -->data
      students.json
      colleges.json
   -->resolvers.js
   -->schema.graphql
   -->server.js

Jalankan perintah npm start seperti yang diberikan di bawah ini -

C:\Users\Admin\test-app>npm start

Server berjalan di port 9000, jadi kita dapat menguji aplikasi menggunakan alat GraphiQL. Buka browser dan masukkan URL http: // localhost: 9000 / graphiql. Ketik kueri berikut di editor -

{
   Test 
}

Tanggapan dari server diberikan di bawah ini -

{
   "data": {
      "test": "Test Success, GraphQL server is running !!"
   }
}