Cara Membangun Server GraphQL Menggunakan Rute API Next.js

Diterbitkan: 2022-03-10

Ringkasan cepat Panduan ini akan mengajarkan Anda dasar-dasar Rute API Next.js. Kami akan mulai dengan menjelaskan apa itu dan mengapa Rute API berguna dibandingkan dengan REST atau GraphQL API. Kemudian, kami akan memandu Anda melalui tutorial langkah demi langkah tentang cara membangun server GraphQL pertama Anda dengan Next.js dan Github API.

Next.js memberi Anda pengalaman pengembang terbaik dengan semua fitur yang Anda butuhkan untuk produksi. Ini memberikan solusi langsung untuk membangun API Anda menggunakan rute API Next.js.

Dalam panduan ini, pertama-tama kita akan mempelajari apa itu Rute API, lalu membuat server GraphQL yang mengambil data dari API Github menggunakan Rute API Next.js.

Untuk mendapatkan hasil maksimal dari tutorial ini, Anda memerlukan setidaknya pemahaman dasar tentang GraphQL. Pengetahuan tentang Apollo Server akan membantu tetapi tidak wajib. Tutorial ini akan bermanfaat bagi mereka yang ingin memperluas keterampilan React atau Next.js mereka ke sisi server dan juga dapat membangun aplikasi full-stack pertama mereka dengan Next.js dan GraphQL.

Jadi, mari selami.

Apa Itu Rute API Next.js?

Next.js adalah kerangka kerja yang memungkinkan rendering aplikasi React pada klien atau/dan server. Sejak versi 9, Next.js sekarang dapat digunakan untuk membangun API dengan Node.js, Express, GrapQL, dan sebagainya. Next.js menggunakan sistem file untuk memperlakukan file di dalam folder pages/api sebagai titik akhir API. Artinya, sekarang, Anda akan dapat mengakses titik akhir API Anda di URL https://localhost:3000/api/your-file-name .

Jika Anda berasal dari React dan tidak pernah menggunakan Next.js, ini mungkin membingungkan karena Next.js adalah framework React. Dan seperti yang sudah kita ketahui, React digunakan untuk membangun aplikasi front-end. Jadi mengapa menggunakan Next.js untuk aplikasi dan API backend?

Nah, Next.js dapat digunakan di sisi klien dan server karena dibangun dengan React, Node.js, Babel, dan Webpack, dan tentu saja, itu juga harus dapat digunakan di server. Next.js bergantung pada server untuk mengaktifkan Rute API dan memungkinkan Anda menggunakan bahasa backend favorit Anda meskipun secara teknis itu adalah kerangka kerja React. Mudah-mudahan, Anda bisa melakukannya dengan benar.

Sejauh ini, kita telah mempelajari apa itu Rute API. Namun, pertanyaan sebenarnya tetap ada: mengapa menggunakan Next.js untuk membangun Server GraphQL ? Mengapa tidak menggunakan GraphQL atau Node.js untuk melakukannya? Jadi, mari bandingkan Rute API Next.js dengan solusi yang ada untuk membangun API di bagian selanjutnya.

Rute API Next.js Versus REST Dan GraphQL

GraphQL dan REST adalah cara yang bagus untuk membangun API. Mereka sangat populer dan digunakan oleh hampir setiap pengembang saat ini. Jadi, mengapa menggunakan kerangka kerja React untuk membangun API? Jawaban singkatnya adalah Rute API Next.js memiliki tujuan yang berbeda karena Rute API memungkinkan Anda untuk memperluas Aplikasi Next.js Anda dengan menambahkan backend ke dalamnya.

Ada solusi yang lebih baik untuk membangun API seperti Node.js, Express, GraphQL, dan seterusnya karena mereka berfokus pada backend. Menurut pendapat saya, Rute API harus digabungkan dengan sisi klien untuk membangun aplikasi full-stack dengan Next.js. Menggunakan Rute API untuk membangun API sederhana seperti menggunakan kekuatan Next.js karena ini adalah kerangka kerja React yang memungkinkan Anda untuk menambahkan backend ke dalamnya dalam waktu singkat.

Pertimbangkan kasus penggunaan saat Anda perlu menambahkan autentikasi ke Aplikasi Berikutnya yang ada. Alih-alih membangun bagian autentikasi dari awal dengan Node.js atau GraphQL, Anda dapat menggunakan Rute API untuk menambahkan autentikasi ke aplikasi Anda, dan itu akan tetap tersedia di titik akhir https://localhost:3000/api/your-file-name . Rute API tidak akan meningkatkan ukuran bundel sisi klien Anda karena hanya bundel sisi server.

Namun, Rute API Next.js hanya dapat diakses dalam Origin yang sama karena Rute API tidak menentukan header Cross-Origin Resource Sharing (CORS). Anda masih dapat mengubah perilaku default dengan menambahkan CORS ke API Anda — tetapi ini adalah penyiapan tambahan. Jika Anda membuat Aplikasi Berikutnya secara statis menggunakan next export — Anda tidak akan dapat menggunakan Rute API dalam aplikasi Anda.

Sejauh ini, kami telah belajar kapan Rute API mungkin menjadi solusi yang lebih baik dibandingkan dengan sejenisnya. Sekarang, mari kita mulai dan mulai membangun Server GraphQL kita.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Pengaturan

Untuk memulai aplikasi baru dengan Next.js, kita akan memilih Create Next App. Anda juga dapat menyiapkan aplikasi baru secara manual dengan Webpack. Anda dipersilakan untuk melakukannya. Karena itu, buka antarmuka baris perintah Anda dan jalankan perintah ini:

 npx create-next-app next-graphql-server

Next.js menyediakan template starter untuk Rute API. Anda dapat menggunakannya dengan menjalankan perintah berikut:

 npx create-next-app --example api-routes api-routes-app

Dalam tutorial ini, kami ingin melakukan semuanya dari awal, itulah sebabnya kami menggunakan Create Next App untuk memulai aplikasi baru dan bukan template starter. Sekarang, struktur proyek sebagai berikut:

 ├── pages | ├── api | | ├── graphql.js | | ├── resolvers | | | └── index.js | | └── schemas | | └── index.js | └── index.js ├── package.json └── yarn.lock

Seperti yang kami katakan sebelumnya, folder api adalah tempat API atau server kami berada. Karena kita akan menggunakan GraphQL, kita memerlukan resolver dan skema untuk membuat server GraphQL. Titik akhir server akan dapat diakses di jalur /api/graphql , yang merupakan titik masuk server GraphQL.

Dengan langkah maju ini, sekarang kita dapat membuat Skema GraphQL untuk server kita.

Buat Skema GraphQL

Sebagai rekap cepat, skema GraphQL mendefinisikan bentuk grafik data Anda.

Selanjutnya, kita perlu menginstal apollo-server-micro untuk menggunakan Apollo Server dalam Next.js.

 yarn add apollo-server-micro

Untuk npm

 npm install apollo-server-micro

Sekarang, mari buat skema GraphQL baru.

Dalam api/schemas/index.js

 import { gql } from "apollo-server-micro"; export const typeDefs = gql` type User { id: ID login: String avatar_url: String } type Query { getUsers: [User] getUser(name: String!): User! }`

Di sini, kami mendefinisikan tipe User yang menggambarkan bentuk pengguna Github. Ia mengharapkan id tipe ID , login , dan avatar_url tipe String. Kemudian, kami menggunakan tipe pada kueri getUsers yang harus mengembalikan array pengguna. Selanjutnya, kami mengandalkan kueri getUser untuk mengambil satu pengguna. Perlu menerima nama pengguna untuk mengambilnya.

Dengan Skema GraphQL yang dibuat, sekarang kita dapat memperbarui file resolver dan membuat fungsi untuk melakukan kueri di atas.

Buat Resolver GraphQL

Resolver GraphQL adalah sekumpulan fungsi yang memungkinkan Anda menghasilkan respons dari kueri GraphQL.

Untuk meminta data dari Github API, kita perlu menginstal pustaka axios . Jadi, buka CLI Anda dan jalankan perintah ini:

 yarn add axios

Atau saat menggunakan npm

 npm install axios

Setelah library terinstal, sekarang mari tambahkan beberapa kode yang berarti ke file resolver.

Di api/resolvers/index.js

 import axios from "axios"; export const resolvers = { Query: { getUsers: async () => { try { const users = await axios.get("https://api.github.com/users"); return users.data.map(({ id, login, avatar_url }) => ({ id, login, avatar_url })); } catch (error) { throw error; } }, getUser: async (_, args) => { try { const user = await axios.get( `https://api.github.com/users/${args.name}` ); return { id: user.data.id, login: user.data.login, avatar_url: user.data.avatar_url }; } catch (error) { throw error; } } } };

Seperti yang Anda lihat di sini, kami mencocokkan nama kueri yang ditentukan sebelumnya pada Skema GraphQL dengan fungsi resolver. Fungsi getUsers memungkinkan kita untuk mengambil semua pengguna dari API dan kemudian mengembalikan larik pengguna yang perlu mencerminkan tipe User . Selanjutnya, kami menggunakan metode getUser untuk mengambil satu pengguna dengan bantuan nama yang diteruskan sebagai parameter.

Dengan ini, kami sekarang memiliki Skema GraphQL dan resolver GraphQL — saatnya untuk menggabungkannya dan membangun Server GraphQL.

Buat server GraphQL

Server GraphQL mengekspos data Anda sebagai GraphQL API. Ini memberi aplikasi klien kekuatan untuk meminta dengan tepat data yang mereka butuhkan dan tidak lebih.

Dalam api/graphql.js

 import { ApolloServer } from "apollo-server-micro"; import { typeDefs } from "./schemas"; import { resolvers } from "./resolvers"; const apolloServer = new ApolloServer({ typeDefs, resolvers }); export const config = { api: { bodyParser: false } }; export default apolloServer.createHandler({ path: "/api/graphql" });

Setelah mengimpor ApolloServer , kami menggunakannya untuk membuat instance baru dan kemudian meneruskan skema dan resolver untuk membuat server GraphQL. Selanjutnya, kita perlu memberi tahu Next.js untuk tidak mengurai permintaan yang masuk dan membiarkan GraphQL menanganinya untuk kita. Terakhir, kita menggunakan apolloServer untuk membuat handler baru, yang berarti path /api/graphql akan berfungsi sebagai titik masuk untuk server GraphQL kita.

Tidak seperti Server Apollo biasa, Next.js menangani awal server untuk kami karena bergantung pada rendering sisi server. Itulah sebabnya, di sini, kita tidak perlu memulai server GraphQL sendiri.

Besar! Dengan langkah maju ini, sekarang kita dapat menguji apakah server GraphQL berfungsi.

Uji Server GraphQL

Setelah Anda menelusuri ke root proyek, buka di CLI, dan kemudian jalankan perintah ini:

 yarn dev

Atau untuk npm

 npm run dev

Sekarang, kunjungi https://localhost:3000/api/graphql dan tambahkan kueri GraphQL di bawah untuk mengambil semua pengguna dari Github.

 { getUsers { id login avatar_url } }

dapatkan-semua-pengguna. (Pratinjau besar)

Mari kita periksa apakah kita dapat mengambil satu pengguna dengan kueri ini.

 query($name: String!){ getUser(name:$name){ login id avatar_url } }

Besar! Server kami bekerja seperti yang diharapkan. Kami selesai membangun server GraphQL menggunakan Next.js API Routes.

Kesimpulan

Dalam tutorial ini, kami menelusuri Rute API Next.js dengan terlebih dahulu menjelaskan apa itu Rute dan kemudian membangun server GraphQL dengan Next.js. Kemampuan untuk menambahkan backend ke aplikasi Next.js adalah fitur yang sangat bagus. Ini memungkinkan kami untuk memperluas aplikasi kami dengan backend nyata. Anda bahkan dapat melangkah lebih jauh dan menghubungkan database untuk membangun API lengkap menggunakan Rute API. Next.js jelas membuatnya lebih mudah untuk membangun aplikasi full-stack dengan API Routes.

Anda dapat melihat pratinjau proyek yang telah selesai di CodeSandbox.

Terima kasih sudah membaca!

Sumber Daya Lebih Lanjut

Sumber daya yang berguna ini akan membawa Anda melampaui cakupan tutorial ini.

Memperkenalkan Rute API (Next.js 9)
Rute API Next.js
Middleware Rute API