grandstack graphql 工具基本試用

grandstack 是一個方便graphql 應用開發的工具html

使用docker-compose 運行react

環境準備

官方的starter 比較好,已是使用docker-compose 建立好了全部的依賴,可是目前使用的版本鏡像有bug,我修改了版本,能夠運行
參考github 項目 https://github.com/rongfengliang/grand-stack-startergit

  • clone starter
git clone https://github.com/grand-stack/grand-stack-starter.git
  • docker-compose 文件
version: '3'
services:
  neo4j:
    build: ./neo4j
    ports:
      - 7474:7474
      - 7687:7687
    environment:
      - NEO4J_dbms_security_procedures_unrestricted=apoc.*
      - NEO4J_apoc_import_file_enabled=true
      - NEO4J_apoc_export_file_enabled=true
      - NEO4J_dbms_shell_enabled=true
  api:
    build: ./api
    ports:
      - 4000:4000
    links:
    - neo4j
    depends_on:
    - neo4j
  ui:
    build: ./ui
    ports:
      - 3000:3000
    links:
    - api
    depends_on:
    - api

starter 說明

由於grandstack 數據存儲服務、查詢服務使用的核心是neo4j 因此須要啓動ne4jgithub

  • neo4j server
docker 配置比較簡單,主要是插件添加以及一些簡單的參數配置
Dockerfile
FROM neo4j:3.4.5

ENV NEO4J_AUTH=neo4j/letmein

ENV APOC_VERSION 3.4.0.2
ENV APOC_URI https://github.com/neo4j-contrib/neo4j-apoc-procedures/releases/download/${APOC_VERSION}/apoc-${APOC_VERSION}-all.jar
RUN wget -P /var/lib/neo4j/plugins ${APOC_URI}

ENV GRAPHQL_VERSION 3.4.0.1
ENV GRAPHQL_URI https://github.com/neo4j-graphql/neo4j-graphql/releases/download/${GRAPHQL_VERSION}/neo4j-graphql-${GRAPHQL_VERSION}.jar
RUN wget -P /var/lib/neo4j/plugins ${GRAPHQL_URI}

EXPOSE 7474 7473 7687

CMD ["neo4j"]

啓動配置
  neo4j:
    build: ./neo4j
    ports:
      - 7474:7474
      - 7687:7687
    environment:
      - NEO4J_dbms_security_procedures_unrestricted=apoc.*
      - NEO4J_apoc_import_file_enabled=true
      - NEO4J_apoc_export_file_enabled=true
      - NEO4J_dbms_shell_enabled=true
  • api server 配置
定義graphql api 的schema 以及使用ne4j 進行graphql 查詢的轉換
簡單schenma,集成了neo4j 指令

type User {
  id: ID!
  name: String
  friends: [User] @relation(name: "FRIENDS", direction: "BOTH")
  reviews: [Review] @relation(name: "WROTE", direction: "OUT")
  avgStars: Float @cypher(statement: "MATCH (this)-[:WROTE]->(r:Review) RETURN toFloat(avg(r.stars))")
  numReviews: Int @cypher(statement: "MATCH (this)-[:WROTE]->(r:Review) RETURN COUNT(r)")
}
查詢指令解析配置,很傳統,比較簡單
import { neo4jgraphql } from "neo4j-graphql-js";
import fs from 'fs';
import path from 'path';
export const typeDefs = 
  fs.readFileSync(process.env.GRAPHQL_SCHEMA || path.join(__dirname, "schema.graphql"))
    .toString('utf-8');

export const resolvers = {
  Query: {
    usersBySubstring: neo4jgraphql // resovler for neo4j
  }
};

graphql server 啓動

import { typeDefs, resolvers } from "./graphql-schema";
import { ApolloServer, gql, makeExecutableSchema } from "apollo-server";
import { v1 as neo4j } from "neo4j-driver";
import { augmentSchema } from "neo4j-graphql-js";
import dotenv from "dotenv";

dotenv.config();

const schema = makeExecutableSchema({
  typeDefs,
  resolvers
});

// augmentSchema will add autogenerated mutations based on types in schema
const augmentedSchema = augmentSchema(schema);

const driver = neo4j.driver(
  process.env.NEO4J_URI || "bolt://localhost:7687",
  neo4j.auth.basic(
    process.env.NEO4J_USER || "neo4j",
    process.env.NEO4J_PASSWORD || "neo4j"
  )
);

const server = new ApolloServer({
  // using augmentedSchema (executable GraphQLSchemaObject) instead of typeDefs and resolvers
  //typeDefs,
  //resolvers,
  context: { driver },
  // remove schema and uncomment typeDefs and resolvers above to use original (unaugmented) schema
  schema: augmentedSchema
});

server.listen(process.env.GRAPHQL_LISTEN_PORT, '0.0.0.0').then(({ url }) => {
  console.log(`GraphQL API ready at ${url}`);
});
  • UI

    基於react 的,也比較簡單,就是集成graphql apidocker

項目使用的react 腳手架生成的,主要是apollo-boost react-apollo的集成使用,同時項目使用了pwa
技術,仍是挺好的參考
UI/src/UserList.js 比較重要,包含了數據查詢的使用,主要是apollo client 的使用

運行&&測試

  • 啓動服務
docker-compose  build
docker-compose up -d
  • 訪問測試
graphql api 地址
http://hostip:4000


添加數據
shell

  • neo4j 數據

  • ui

說明

總的來講集成neo4j 是很不錯,由於graphql 作的就是graph 查詢,neo4j 就是幹這個的,可是從實際來講neo4j 並非免費的(單機是,集羣不是)
同時相似的一些圖數據庫已經直接集成了graphql 了好比dgraph 、startdog數據庫

參考資料

https://grandstack.io/docs/getting-started-grand-stack-starter.html
https://github.com/grand-stack/grand-stack-starter.git
https://github.com/rongfengliang/grand-stack-starterapi

相關文章
相關標籤/搜索