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