Here it is, the admin backend fetches the entities from the graphql backend, next step, add new entities from admin

PiTiLeZarD · PiTiLeZarD · commit bfaa760df91c · 2021-05-23T08:33:13.000+10:00
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 *.sqlite3
 yarn-error.log
 .parcel-cache
-dist
+dist
+__generated__
diff --git a/babel.config.json b/babel.config.json
@@ -8,5 +8,5 @@
             }
         ]
     ],
-    "plugins": ["@parcel/babel-plugin-transform-runtime"]
+    "plugins": ["relay", "@parcel/babel-plugin-transform-runtime"]
 }
diff --git a/docker/.env b/docker/.env
@@ -1,4 +1,5 @@
 DEBUG=1
 BACKEND_PORT=4000
 ADMIN_PORT=1234
-SCHEMA_CONFIG_DB_PATH=/db/backend-graphql.sqlite3
+SCHEMA_CONFIG_DB_PATH=/db/backend-graphql.sqlite3
+BACKEND_GQL_API_URL=http://localhost:4000/backend/graphql
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
@@ -28,6 +28,9 @@ services:
         command: yarn admin -p ${ADMIN_PORT}
         ports:
             - ${ADMIN_PORT}:${ADMIN_PORT}
+        environment:
+            - BACKEND_GQL_API_URL=${BACKEND_GQL_API_URL}
+            - COMPILE_RELAY=1
 
 volumes:
     db:
diff --git a/docker/entrypoint b/docker/entrypoint
@@ -4,5 +4,9 @@ set -e
 cd /app
 yarn install
 
+if [ ! -z $COMPILE_RELAY ]; then
+    yarn relay
+fi
+
 # run the provided cmd
 exec "$@"
diff --git a/nodemon.json b/nodemon.json
@@ -0,0 +1,5 @@
+{
+    "ignore": [".git", "node_modules/**/node_modules"],
+    "watch": ["repos/nodejs", "repos/libs"],
+    "ext": "js,mjs"
+}
diff --git a/package.json b/package.json
@@ -10,12 +10,17 @@
         "@babel/preset-react": "^7.13.13",
         "@parcel/babel-plugin-transform-runtime": "^2.0.0-nightly.1823",
         "@parcel/babel-preset-env": "^2.0.0-alpha.3",
+        "babel-plugin-relay": "^11.0.2",
+        "get-graphql-schema": "^2.1.2",
         "nodemon": "^2.0.7",
         "parcel": "^2.0.0-nightly.678",
+        "relay-compiler": "^11.0.2",
         "sqlite3": "^5.0.2"
     },
     "scripts": {
         "server": "nodemon ./repos/nodejs/server/src/index.mjs",
-        "admin": "parcel ./repos/react/admin/src/index.html"
+        "admin": "parcel ./repos/react/admin/src/index.html",
+        "admin_gql_schema": "get-graphql-schema $(cat docker/.env | grep BACKEND_GQL_API_URL | cut -d'=' -f 2) > ./repos/react/admin/schema.graphql",
+        "relay": "relay-compiler --src ./repos/react/admin/src --schema ./repos/react/admin/schema.graphql --extensions jsx"
     }
 }
diff --git a/repos/nodejs/backend-graphql/src/models/entity.mjs b/repos/nodejs/backend-graphql/src/models/entity.mjs
@@ -3,7 +3,7 @@ const { DataTypes } = sequelize;
 
 const entity = (db) =>
     db.define("Entity", {
-        id: {
+        _id: {
             type: DataTypes.INTEGER,
             primaryKey: true,
             autoIncrement: true,
diff --git a/repos/nodejs/backend-graphql/src/schema.mjs b/repos/nodejs/backend-graphql/src/schema.mjs
@@ -2,7 +2,7 @@ import { buildSchema } from "graphql";
 
 const types = `
     type Entity {
-        id: Int
+        _id: Int
         name: String
     }
 `;
diff --git a/repos/nodejs/server/package.json b/repos/nodejs/server/package.json
@@ -2,9 +2,10 @@
     "name": "@agql.js/server",
     "version": "1.0.0",
     "dependencies": {
-        "express": "^4.17.1",
         "@agql.js/backend-graphql": "^1.0.0",
-        "@agql.js/graphql": "^1.0.0"
+        "@agql.js/graphql": "^1.0.0",
+        "cors": "^2.8.5",
+        "express": "^4.17.1"
     },
     "main": "src/index.mjs"
 }
diff --git a/repos/nodejs/server/src/index.mjs b/repos/nodejs/server/src/index.mjs
@@ -1,4 +1,5 @@
 import express from "express";
+import cors from "cors";
 
 import homepage from "./homepage.mjs";
 import backend from "@agql.js/backend-graphql";
@@ -7,6 +8,8 @@ import graphql from "@agql.js/graphql";
 const app = express();
 app.debug = process.env.DEBUG == 1;
 
+app.use(cors());
+
 if (app.debug) {
     app.use((req, res, next) => {
         console.log(`${req.method} ${req.url}`);
diff --git a/repos/react/admin/package.json b/repos/react/admin/package.json
@@ -5,7 +5,9 @@
         "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.11.2",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-relay": "^11.0.2",
+        "relay-runtime": "^11.0.2"
     },
     "main": "src/index.html"
 }
diff --git a/repos/react/admin/schema.graphql b/repos/react/admin/schema.graphql
@@ -0,0 +1,23 @@
+"""Exposes a URL that specifies the behaviour of this scalar."""
+directive @specifiedBy(
+  """The URL that specifies the behaviour of this scalar."""
+  url: String!
+) on SCALAR
+
+type Entity {
+  _id: Int
+  name: String
+}
+
+input EntityInput {
+  name: String!
+}
+
+type Mutation {
+  createEntity(input: EntityInput): Entity
+}
+
+type Query {
+  entities: [Entity]
+}
+
diff --git a/repos/react/admin/src/App.jsx b/repos/react/admin/src/App.jsx
@@ -1,15 +1,13 @@
-import { Fragment, useState } from "react";
-import { Grid, List, ListItem, ListItemText, Card, CardContent, CardHeader, IconButton } from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
+import { Suspense } from "react";
+import { RelayEnvironmentProvider } from "react-relay";
+import RelayEnvironment from "./relay";
+
 import AgqlEffect from "./AgqlEffect";
+import EntityManager from "./EntityManager";
 
 const App = (props) => {
-    const [selectedEntity, setSelectedEntity] = useState(null);
-
     return (
-        <Fragment>
+        <RelayEnvironmentProvider environment={RelayEnvironment}>
             <style type="text/css">{`
                 * {
                     -webkit-box-sizing: border-box;
@@ -22,54 +20,13 @@ const App = (props) => {
                     background: #030005;
                 }
             `}</style>
-            <div style={{ margin: "3em auto" }}>
-                <AgqlEffect foreground="Graphql Made Easy" background="AGQL" size={80} />
-            </div>
-            <Grid container spacing={8}>
-                <Grid item xs={2} />
-                <Grid item xs={4}>
-                    <Card>
-                        <CardHeader
-                            title="Entities"
-                            subheader="10 Entities currently in the database"
-                            action={
-                                <IconButton>
-                                    <AddIcon />
-                                </IconButton>
-                            }
-                        />
-                        <CardContent>
-                            <List>
-                                {new Array(10).fill().map((_, i) => (
-                                    <ListItem button onClick={(ev) => setSelectedEntity(i)}>
-                                        <ListItemText primary={`Entity ${i}`} />
-                                        <DoubleArrowIcon />
-                                    </ListItem>
-                                ))}
-                            </List>
-                        </CardContent>
-                    </Card>
-                </Grid>
-
-                <Grid item xs={4}>
-                    {selectedEntity != null && (
-                        <Card>
-                            <CardHeader
-                                title={`Entity ${selectedEntity}`}
-                                subheader={`ID: ${selectedEntity} Created At: September 14, 2016`}
-                                action={
-                                    <IconButton>
-                                        <MoreVertIcon />
-                                    </IconButton>
-                                }
-                            />
-                            <CardContent>Here fields and links</CardContent>
-                        </Card>
-                    )}
-                </Grid>
-                <Grid item xs={2} />
-            </Grid>
-        </Fragment>
+            <Suspense fallback={"Loading ..."}>
+                <div style={{ margin: "3em auto" }}>
+                    <AgqlEffect foreground="Graphql Made Easy" background="AGQL" size={80} />
+                    <EntityManager />
+                </div>
+            </Suspense>
+        </RelayEnvironmentProvider>
     );
 };
 
diff --git a/repos/react/admin/src/EntityManager.jsx b/repos/react/admin/src/EntityManager.jsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { graphql, useLazyLoadQuery } from "react-relay";
+import { Grid, List, ListItem, ListItemText, Card, CardContent, CardHeader, IconButton } from "@material-ui/core";
+
+import AddIcon from "@material-ui/icons/Add";
+import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+
+const EntitiesQuery = graphql`
+    query EntityManagerEntitiesQuery {
+        entities {
+            _id
+            name
+        }
+    }
+`;
+const EntityManager = (props) => {
+    const [selectedEntity, setSelectedEntity] = useState(null);
+
+    const { entities } = useLazyLoadQuery(EntitiesQuery);
+    return (
+        <Grid container spacing={8}>
+            <Grid item xs={2} />
+            <Grid item xs={4}>
+                <Card>
+                    <CardHeader
+                        title="Entities"
+                        subheader={`${entities.length} Entities currently in the database`}
+                        action={
+                            <IconButton>
+                                <AddIcon />
+                            </IconButton>
+                        }
+                    />
+                    <CardContent>
+                        <List>
+                            {entities.map((entity, i) => (
+                                <ListItem key={i} button onClick={(ev) => setSelectedEntity(entity)}>
+                                    <ListItemText primary={entity.name} />
+                                    <DoubleArrowIcon />
+                                </ListItem>
+                            ))}
+                        </List>
+                    </CardContent>
+                </Card>
+            </Grid>
+
+            <Grid item xs={4}>
+                {selectedEntity != null && (
+                    <Card>
+                        <CardHeader
+                            title={`${selectedEntity._id}: ${selectedEntity.name}`}
+                            subheader={`Other informations`}
+                            action={
+                                <IconButton>
+                                    <MoreVertIcon />
+                                </IconButton>
+                            }
+                        />
+                        <CardContent>Here fields and links</CardContent>
+                    </Card>
+                )}
+            </Grid>
+            <Grid item xs={2} />
+        </Grid>
+    );
+};
+
+export default EntityManager;
diff --git a/repos/react/admin/src/relay.jsx b/repos/react/admin/src/relay.jsx
@@ -0,0 +1,31 @@
+import { Environment, Network, RecordSource, Store } from "relay-runtime";
+
+export const fetchGraphQL = async (query, variables) => {
+    const BACKEND_GQL_API_URL = process.env.BACKEND_GQL_API_URL;
+
+    // Fetch data from GitHub's GraphQL API:
+    const response = await fetch(BACKEND_GQL_API_URL, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+        },
+        body: JSON.stringify({
+            query,
+            variables,
+        }),
+    });
+
+    // Get the response as JSON
+    return await response.json();
+};
+
+async function fetchRelay(params, variables) {
+    console.log(`fetching query ${params.name} with ${JSON.stringify(variables)}`);
+    return fetchGraphQL(params.text, variables);
+}
+
+export default new Environment({
+    network: Network.create(fetchRelay),
+    store: new Store(new RecordSource()),
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,5 @@`
`8`	`8`	`}`
`9`	`9`	`]`
`10`	`10`	`],`
`11`		`- "plugins": ["@parcel/babel-plugin-transform-runtime"]`
	`11`	`+ "plugins": ["relay", "@parcel/babel-plugin-transform-runtime"]`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { buildSchema } from "graphql";`
`2`	`2`
`3`	`3`	const types = `
`4`	`4`	`type Entity {`
`5`		`- id: Int`
	`5`	`+ _id: Int`
`6`	`6`	`name: String`
`7`	`7`	`}`
`8`	`8`	`;