Next.js, sunucu tarafında render edilen veya statik olarak ihraç edilen React uygulamalarının geliştirilmesi için bir JavaScript çerçevesidir. GraphQL, API’ler için bir sorgu dilidir ve birden çok sorguyu sunucuya tek bir isteğe gönderme yeteneği nedeniyle REST API’lerine göre daha az overhead’ının olması nedeniyle giderek popüler hale gelmektedir.
Next.js uygulamasında GraphQL kullanmak için öncelikle bir GraphQL sunucusu kurmanız gerekir. Bu, Apollo Server gibi bir araç kullanarak yapılabilir, bu araç Next.js uygulamanızla entegre edilebilen tam bir GraphQL sunucusu sağlar.
GraphQL sunucunuz kurulunca, Next.js bileşenlerinizden GraphQL sunucunuza etkileşim kurmak için Apollo Client gibi bir GraphQL istemcisi kullanabilirsiniz. Bileşenlerinizde GraphQL sorgularını ve işlemlerini tanımlayabilir ve sunucunuzdan veri almak veya güncellemek için kullanabilirsiniz.
Burada Next.js bileşeninde GraphQL kullanmanın bir örneği görünebilir:
import { gql, useQuery } from ‘@apollo/client’; const GET_MESSAGES = gql` query GetMessages { messages { id text createdAt } } `; function MessagesList() { const { loading, error, data } = useQuery(GET_MESSAGES); if (loading) return <p>Loading…</p>; if (error) return <p>Error :(</p>; return ( <ul> {data.messages.map(message => ( <li key={message.id}> {message.text} ({message.createdAt}) </li> ))} </ul> ); } export default MessagesList;
Bu örnekte, Apollo Client kütüphanesinin useQuery hook’unu kullanarak GraphQL sunucumuzdan veri alıyoruz. GET_MESSAGES sorgusu, @apollo/client kütüphanesinin gql şablon literalleri ile tanımlanır ve biz GraphQL sorgularını JavaScript string literalleri olarak tanımlama imkanı sunar. useQuery hook, sorgunun yükleme durumu, hata durumu ve fetched verileri hakkında bilgi içeren bir nesne döndürür. Bu bilgiyi, sorgunun durumuna dayalı olarak bileşenimizin farklı parçalarını şartlı olarak işlemek için kullanabiliriz.
