Eray Bartan Blog

Eray Bartan Blog

Neo4j Graphql Server & NextJs

Neo4j Graphql Server & NextJs

Subscribe to my newsletter and never miss my upcoming articles

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.

Build Fullstack GraphQL Applications With Ease   GRANDstack.png

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. aura-browser.png 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.

68747470733a2f2f692e696d6775722e636f6d2f41453557364f572e706e67.png

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,
    },
  };
}
 
Share this

Impressum

Technical Specialties

  • Neo4j Graph Database Beginner Developer
  • Google Data Studio Dashboard Design
  • Micosoft Power BI Dashboard Design

Industry Experience

  • Municiapilty (IT Department, Data Analyst)
  • Real Estate (Web Design, Social Media Publisher, Mailchimp Automation)
  • Hotels & Restaurants (Web Design, Google Ads , Facebook Ads)
  • Sports (Web Design, Mailchimp Campaign)
Proudly part of