Next.js API Rotalarını Kullanarak Bir GraphQL Sunucusu Nasıl Oluşturulur

Next.js, üretim için ihtiyaç duyduğunuz tüm özelliklerle size en iyi geliştirici deneyimini sunar. Next.js API yollarını kullanarak API'nizi oluşturmak için basit bir çözüm sunar.

Bu kılavuzda, önce API Rotalarının ne olduğunu öğreneceğiz ve ardından Next.js API Rotalarını kullanarak Github API'sinden verileri alan bir GraphQL sunucusu oluşturacağız.

Bu eğitimden en iyi şekilde yararlanmak için, en azından temel bir GraphQL anlayışına ihtiyacınız var. Apollo Sunucusu bilgisi yardımcı olacaktır, ancak zorunlu değildir. Bu eğitim, React veya Next.js becerilerini sunucu tarafına genişletmek ve Next.js ve GraphQL ile ilk full-stack uygulamalarını oluşturmak isteyenler için faydalı olacaktır.

Öyleyse, içeri girelim.

Next.js API Rotaları Nelerdir?

Next.js, istemcide ve/veya sunucuda React uygulamalarının oluşturulmasını sağlayan bir çerçevedir. Sürüm 9'dan bu yana, Next.js artık Node.js, Express, GrapQL vb. ile API'ler oluşturmak için kullanılabilir. Next.js, klasör pages/api içindeki dosyaları API uç noktaları olarak işlemek için dosya sistemini kullanır. Yani artık API uç noktanıza https://localhost:3000/api/your-file-name URL'sinden erişebileceksiniz.

React'ten geldiyseniz ve Next.js'yi hiç kullanmadıysanız, Next.js bir React çerçevesi olduğu için bu kafa karıştırıcı olabilir. Ve zaten bildiğimiz gibi, React ön uç uygulamalar oluşturmak için kullanılıyor. Peki neden arka uç uygulamaları ve API'ler için Next.js kullanmalısınız?

Pekala, Next.js hem istemci hem de sunucu tarafında kullanılabilir çünkü React, Node.js, Babel ve Webpack ile oluşturulmuştur ve açıkçası sunucuda da kullanılabilir olmalıdır. Next.js, API Routes'ı etkinleştirmek için sunucuya güvenir ve teknik olarak bir React çerçevesi olsa bile favori arka uç dilinizi kullanmanıza izin verir. İnşallah doğru anlarsın.

Buraya kadar API Routes'ın ne olduğunu öğrendik. Ancak asıl soru şu: Neden bir GraphQL Sunucusu oluşturmak için Next.js kullanıyorsunuz ? Bunu yapmak için neden GraphQL veya Node.js kullanmıyorsunuz? Öyleyse, Next.js API Rotalarını, bir sonraki bölümde API oluşturmaya yönelik mevcut çözümlerle karşılaştıralım.

Next.js API Rotalarına Karşı REST ve GraphQL

GraphQL ve REST, API oluşturmanın harika yollarıdır. Süper popülerler ve günümüzde hemen hemen her geliştirici tarafından kullanılıyorlar. Peki, API'ler oluşturmak için neden bir React çerçevesi kullanalım? Pekala, hızlı cevap, Next.js API Routes'ın farklı bir amaca sahip olmasıdır, çünkü API Routes, Next.js Uygulamanızı ona bir arka uç ekleyerek genişletmenize izin verir.

Arka uca odaklandıkları için Node.js, Express, GraphQL vb. API'ler oluşturmak için daha iyi çözümler vardır. Bence, Next.js ile tam yığın bir uygulama oluşturmak için API Rotaları bir istemci tarafı ile birleştirilmelidir. Basit bir API oluşturmak için API Routes'ı kullanmak, Next.js'nin gücünü yeterince kullanmaya benzer çünkü bu, ona hemen bir arka uç eklemenizi sağlayan bir React çerçevesidir.

Mevcut bir Sonraki Uygulamaya kimlik doğrulama eklemeniz gerektiğinde kullanım durumunu düşünün. Yetkilendirme bölümünü Node.js veya GraphQL ile sıfırdan oluşturmak yerine, uygulamanıza kimlik doğrulama eklemek için API Routes'ı kullanabilirsiniz ve bu, https://localhost:3000/api/your-file-name uç noktasında bulunmaya devam edecektir. https://localhost:3000/api/your-file-name . API Rotaları, yalnızca sunucu tarafı paketler oldukları için istemci tarafı paket boyutunuzu artırmaz.

Ancak Next.js API Yollarına yalnızca aynı kaynaktan erişilebilir çünkü API Yolları, Kaynaklar Arası Kaynak Paylaşımı (CORS) başlıklarını belirtmez. API'nize CORS ekleyerek varsayılan davranışı değiştirmeye devam edebilirsiniz - ancak bu ekstra bir kurulumdur. Sonraki next export aktarmayı kullanarak Sonraki Uygulamanızı statik olarak oluşturursanız, uygulamanızda API Rotalarını kullanamazsınız.

Şimdiye kadar, API Routes'ın benzerlerine kıyasla ne zaman daha iyi bir çözüm olabileceğini öğrendik. Şimdi ellerimizi kirletelim ve GraphQL Sunucumuzu oluşturmaya başlayalım.

Kurulum

Next.js ile yeni bir uygulama başlatmak için Sonraki Uygulama Oluştur'a gideceğiz. Webpack ile manuel olarak yeni bir uygulama kurmak da mümkündür. Bunu yapmaktan memnuniyet duyarız. Olduğu söyleniyor, komut satırı arayüzünüzü açın ve şu komutu çalıştırın:

 npx create-next-app next-graphql-server

Next.js, API Rotaları için bir başlangıç ​​şablonu sağlar. Aşağıdaki komutu yürüterek kullanabilirsiniz:

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

Bu öğreticide, her şeyi sıfırdan yapmak istiyoruz, bu nedenle yeni bir uygulamayı başlatmak için başlangıç ​​şablonunu değil, Sonraki Uygulama Oluştur'u kullanıyoruz. Şimdi projeyi şu şekilde yapılandırın:

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

Daha önce de söylediğimiz gibi api klasörü, API veya sunucumuzun yaşadığı yerdir. GraphQL kullanacağımız için bir GraphQL sunucusu oluşturmak için bir çözümleyiciye ve bir şemaya ihtiyacımız var. Sunucunun uç noktasına, GraphQL sunucusunun giriş noktası olan /api/graphql yolundan erişilebilir.

Bu adım ile artık sunucumuz için GraphQL Şemasını oluşturabiliriz.

GraphQL Şemaları Oluşturun

Hızlı bir özet olarak, bir GraphQL şeması veri grafiğinizin şeklini tanımlar.

Ardından, Apollo Server'ı Next.js içinde kullanmak için apollo-server-micro micro'yu kurmamız gerekiyor.

 yarn add apollo-server-micro

npm için

 npm install apollo-server-micro

Şimdi yeni bir GraphQL şeması oluşturalım.

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! }`

Burada bir Github kullanıcısının şeklini tanımlayan bir User tipi tanımlıyoruz. ID türünde bir id , bir login ve String türünde bir avatar_url . Ardından, bir dizi kullanıcı döndürmesi gereken getUsers sorgusundaki türü kullanırız. Ardından, tek bir kullanıcıyı getirmek için getUser sorgusuna güveniyoruz. Almak için kullanıcının adını alması gerekir.

Oluşturulan bu GraphQL Şeması ile artık çözücü dosyasını güncelleyebilir ve yukarıdaki bu sorguları gerçekleştirecek fonksiyonları oluşturabiliriz.

GraphQL Çözümleyicilerini Oluşturun

GraphQL çözümleyicisi, bir GraphQL sorgusundan yanıt oluşturmanıza olanak sağlayan bir dizi işlevdir.

Github API'sinden veri istemek için axios kitaplığını kurmamız gerekiyor. Bu nedenle, CLI'nizi açın ve şu komutu yürütün:

 yarn add axios

Veya npm kullanırken

 npm install axios

Kütüphane kurulduktan sonra, şimdi çözücüler dosyasına anlamlı bir kod ekleyelim.

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; } } } };

Burada görebileceğiniz gibi, daha önce GraphQL Şemasında tanımlanan sorgu adını çözümleyici işlevleriyle eşleştiriyoruz. getUsers işlevi, tüm kullanıcıları API'den almamızı ve ardından User türünü yansıtması gereken bir dizi kullanıcı döndürmemizi sağlar. Daha sonra, parametre olarak girilen ad yardımıyla tek bir kullanıcıyı getirmek için getUser yöntemini kullanıyoruz.

Bununla birlikte, artık bir GraphQL Şemamız ve bir GraphQL çözümleyicimiz var - bunları birleştirmenin ve GraphQL Sunucusunu oluşturmanın zamanı geldi.

GraphQL sunucusunu oluşturun

Bir GraphQL sunucusu, verilerinizi bir GraphQL API'si olarak sunar. İstemci uygulamalara tam olarak ihtiyaç duydukları verileri isteme gücü verir, başka bir şey değil.

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" });

ApolloServer içe aktardıktan sonra, onu yeni bir örnek oluşturmak için kullanırız ve ardından bir GraphQL sunucusu oluşturmak için şemayı ve çözümleyiciyi iletiriz. Ardından, Next.js'ye gelen isteği ayrıştırmamasını ve GraphQL'nin bizim için halletmesine izin vermemiz gerekiyor. Son olarak, yeni bir işleyici oluşturmak için apolloServer kullanıyoruz, bu da /api/graphql yolunun GraphQL sunucumuz için bir giriş noktası olarak hizmet edeceği anlamına geliyor.

Normal Apollo Sunucusunun aksine, Next.js, sunucu tarafında işlemeye dayandığından, bizim için sunucunun başlangıcını yönetir. Bu nedenle burada GraphQL sunucusunu kendi başımıza başlatmamız gerekmiyor.

Harika! Bu ileri adımla, artık GraphQL sunucusunun çalışıp çalışmadığını test edebiliriz.

GraphQL Sunucusunu Test Edin

Projenin köküne göz attıktan sonra, onu CLI'de açın ve ardından şu komutu yürütün:

 yarn dev

Veya npm için

 npm run dev

Şimdi, https://localhost:3000/api/graphql adresini ziyaret edin ve tüm kullanıcıları Github'dan almak için aşağıdaki GraphQL sorgusunu ekleyin.

 { getUsers { id login avatar_url } }

Bu sorgu ile tek bir kullanıcı getirip getiremeyeceğimizi kontrol edelim.

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

Harika! Sunucumuz beklendiği gibi çalışıyor. Next.js API Routes kullanarak bir GraphQL sunucusu oluşturmayı bitirdik.

Çözüm

Bu eğitimde, önce bunların ne olduğunu açıklayarak ve ardından Next.js ile bir GraphQL sunucusu oluşturarak Next.js API Rotalarını inceledik. Next.js uygulamalarına arka uç ekleme yeteneği gerçekten güzel bir özellik. Uygulamalarımızı gerçek bir arka uçla genişletmemizi sağlar. API Routes kullanarak eksiksiz bir API oluşturmak için daha da ileri gidebilir ve bir veritabanı bağlayabilirsiniz. Next.js, API Routes ile tam yığın bir uygulama oluşturmayı kesinlikle kolaylaştırıyor.

Bitmiş projeyi CodeSandbox'ta önizleyebilirsiniz.

Okuduğunuz için teşekkürler!

Diğer Kaynaklar

Bu faydalı kaynaklar sizi bu eğitimin kapsamının ötesine götürecektir.

• API Rotaları ile Tanışın (Next.js 9)
• Next.js API Rotaları
• API Rotaları Ara Yazılımı