komut satırı ile bir nextjs kurulumu herçekleştirdikten sonra...

npx create-next-app next

NextJs halihazırda expressjs bir api sunucusuna sahip. NextJs son güncelleme ile Apollo GraphQL Playground desteği sağladı.

MERN Stack kavramından GRANDSTACK kıvamına iki yıl içinde gelmiş olduk.

Sonraki adım Apollo GraphQL workflows kurulumu yapmak. api klasöründe graphql.js doyasının formatı aşağıdaki şekilde oluştu.

GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).

yarn add apollo-server-micro micro GraphQL

The Neo4j GraphQL Library

Bize GraphQL kütüphanesinin arka tarafına Neo4J desteği almamızı sağlıyor. Cypher ile Graphql sorguları çok güzel çalışıyor. Graphql üzerinden kayıt güncelleme imkanı yok. Kayıtlar Neo4J Aura üzerinden güncelleniyor.

Neo4j browser üzerinden veritabanı tasarımı çok hoşunuza gidecek. Sorgu tasarım ve sonuç görselleştirme konusunda kullanıcı dostu bir araç. Cypher ile csv import seçenekleri çok kullanışlı...

import { gql, ApolloServer } from "apollo-server-micro";
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
import {Neo4jGraphQL} from "@neo4j/graphql"
import neo4j from "neo4j-driver"
import "ts-tiny-invariant"
const typeDefs = gql`

  type Araclar @exclude(operations: [CREATE, UPDATE, DELETE]) {

    id: ID
    plaka: String
    turu: String
    bolge: String

  }

  type Mahalle @exclude(operations: [CREATE, UPDATE, DELETE]) {
    id: ID
    mahalleAdi: String
    mahalleId: Int

  }

  type Personel @exclude(operations: [CREATE, UPDATE, DELETE]) {
    personelStatu: String
    perosnelId: String
    personelSicil: String
    personelisimSoyisim: String
    personelStatu: String
    personelBolge: String
    personelHESKODU: String

  }


`;

const driver = neo4j.driver(
    process.env.NEO4J_URI,
    neo4j.auth.basic(process.env.NEO4J_USER, process.env.NEO4J_PASSWORD)
)

const neoSchema = new Neo4jGraphQL({typeDefs, driver})

const apolloServer = new ApolloServer({
  schema: neoSchema.schema,
  playground: true,
  introspection: true,
  plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
});

const startServer = apolloServer.start();

export default async function handler(req, res) {
  await startServer;
  await apolloServer.createHandler({
    path: "/api/graphql",
  })(req, res);
}

export const config = {
  api: {
    bodyParser: false,
  },
};

GraphQL Playground erişimine ulaşabilirsiniz. localhost:3000/api/graphql adresinin ekran görüntüsü aşağıdaki gibi oluyor.

GraphQL sogularının NextJs sayfalarında okunabilmesi için graph-request kullanıyoruz.

Github kaydı oluşturduktan sonra vercel ile kurulum gerçekleştirdim. index.js getServerSideProps() fonksiyonu aşağıdaki şekilde güncelledim. request adresi localhost:3000/api/graphql yerine nextneo4jgraphql.vercel.app/api/graphql adresi ile güncelledim. CORS problemi yaşamadım. lokal ve cloud düzgün çalışıyor.

export async function getServerSideProps() {
  const query = gql`
    {
      mahalles {
        mahalleAdi
        mahalleId
      }
    }
  `;
  const data = await request(
    "http://localhost:3000/api/graphql", query
  );

  const { mahalles } = data;
  return {
    props: {
      mahalles,
    },
  };
}