Hello World GraphQL dengan Expressjs

Apa yang kamu minta, itulah yang kamu dapat. Itulah yang ditawarkan oleh GraphQL.

Misalkan, kamu mengirimkan

query {
  hello
}

maka, yang akan kamu dapatkan dari server adalah kurang-lebih:

data {
  hello: "hello world"
}

Oh ya, selain itu graphql juga merupakan language agnostic, dengan makna, bahwa kamu bisa menulis graphql server dengan bahasa apa saja, dan dia tidak terikat dengan bahasa tertentu. Dia juga seperti REST API, yang berarti dia hanya untuk menampilkan data, baik itu dari satu database, beberapa database, atau REST API yang lainnya, atau bahkan dari graphql server yang lainnya.

Tapi, disini kita tidak akan banyak bahas tentang apa itu graphql. Kita akan belajar, membuat minimal graphql server dengan menggunakan expressjs. Dan hanya melimit dengan 1 query saja, yaitu hello. Istilahnya, kalau di tempat lain membuat program hello world.

Google Perkenalkan Firestore, Database NoSQL Baru

Membuat project nodejs baru

Di sini, yang kamu butuhkan adalah nodejs dan npm atau yarn. Dan kemudian install expressjs nya.

• buat folder baru dengan mkdir hello-world-graphql
• init project baru dengan yarn init atau npm init.

Install express-js

Dikarenakan kita akan menggunakan express-js sebagai servernya, maka pertama tama install ini dulu dengan yarn add express atau npm install --save express. Berikutnya, tuliskan kode dibawah ini:

var express = require("express"),
  app = express();

app.use("/graphql", (req, res, next) => {
  res.send("hello world, endpoint ini akan kita jadikan graphql endpoint");
});

app.listen(3000, () => console.log("server berjalan di http://localhost:3000"));

Kode diatas sangat familiar bagi javascript programmer, insyaAlloh. Tapi, bagaimanapun saya akan jelaskan sedikit mengenai hal ini.

1. Import package express dan buat instance berupa app
2. Gunakan property use, yang kita gunakan untuk meregister middleware ke endpoint tertentu. (perhatikan, kita definisikan /graphql sebagai param pertama)
3. Kita buat middleware sementara yang hanya mengembalikan text sebagai response
4. Akhirnya, kita jalankan server di port 3000

Vote App (VoteMon) dengan GraphQL dan ReactJS [Bagian 2]

Install graphql-tools, apollo-server-express

apollographql* telah menyediakan tools-set untuk memudahkan kita membuat graphql server. Juga, mereka telah membuatkan graphiql sebagai antarmuka untuk mencoba query/mutation/subscription yang kita definisikan di server. Package ini bernama apollo-server-express.

Di sisi lain, graphql-tools memudahkan kita untuk membuat schema beserta resolvers. schema adalah berisi definisi type dan field. Sedangkan resolvers adalah fungsi untuk menentukan data apa yang akan ditampilkan dengan type/field yang ada. Package ini memiliki dependency berupa graphql package.

Untuk lebih lanjut tentang graphql secara keseluruhan, kamu bisa datang ke https://graphql.org/learn dan mempelajarinya disana.

Jadi, install graphql-tools, graphql, dan apollo-server-express.

* Apollo menyediakan graphql api yang universal, yang dapat kamu gunakan diatas service yang sudah ada, tanpa harus menunggu backend berubah.

Schema

Selanjutnya, mari kita membuat schema. Berikut schema kita, hanya sebuah query, dengan field hello.

type Query {
  hello: String
}

Query ini adalah type spesial dalam graphql. Digunakan untuk memberitahukan kepada user, query apa saja yang kita sediakan di dalam graphql server ini. Disana masih ada 2 type lagi yang spesial didalam graphql. Mutation dan Subscription. Diluar kekhususan itu, ketiga type ini sama seperti type type yang lainnya.

Di dalam contoh, kita tuliskan definisi type diatas dengan menjadikannya dia string. Perhatikan berikut:

var typeDefs = `
type Query{
  hello : String
}

Kita juga perlu membuat resolvers, untuk memberitahukan kepada graphql server, apa yang akan dikembalikan kepada user, ketika user melakukan query query { hello }. Nah, hello ini mau nampilkan apa?

Dengan graphql-tools ini, untuk mendefinisikan resolvers adalah dengan membuat objek dengan struktur yang sama dengan typeDefs. Berikut contoh resolvers untuk typeDefs diatas:

var resolvers = {
  Query: {
    hello() {
      return "hello world";
    }
  }
};

Pada akhirnya, kita gabungkan typeDefs ini dengan resolvers dan jadikan mereka sebagai schema menggunakan makeExecutableSchema dari graphql-tools

var schema = makeExecutableSchema({typeDefs: typeDefs, resolvers: resolvers})

Berikut lampiran kode secara keseluruhan

var makeExecutableSchema = require('graphql-tools').makeExecutableSchema;

var typeDefs = `
type Query{
  hello: String
}`;

var resolvers = {
  Query: {
    hello() {
      return "hello world";
    }
  }
};

var schema = makeExecutableSchema({ typeDefs: typeDefs, resolvers: resolvers });

graphqlExpress middleware

Berikutnya, supaya endpoint /graphql bisa kita gunakan, kita perlu menggunakan graphqlExpress middleware ini ke endpoint tersebut. graphqlExpress ini membutuhkan argument berupa objek atau fungsi yang mengembalikan sebuah objek. Tapi disini, kita hanya akan menggunakan objek, karena memang tidak dibuthkan untuk menggunakan fungsi.

graphqlExpress ini adalah middle ware dari apollo-server-express package.

var graphqlExpress = require('apollo-server-express').graphqlExpress;

// ubah implementasi di route `/graphql`
app.use("/graphql", graphqlExpress({schema: schema}))

Mari Kita Coba

Pada akhirnya, mari kita coba hello world graphql server kita. Navigasikan halamann web ke http://localhost:3000/graphql. Apa yang kamu dapati?

get query missing

Hmmt, bagus. Tambahkan query ?query={hello} dan perhatikan apa yang terjadi.

Penutup

Selamat, kamu telah membuat hello world versi graphql. Dan pada akhirnya, bila kamu ingin melihat script server secara utuh, kamu bisa datang ke repo ini

Terimakasih, dan semoga bermanfaat.