GraphQL + typescript + dev environment setup

Author: MichaelJCompton

README.md

@@ -4,13 +4,23 @@ This app is intended to show off Dgraph quick start, and integration with Auth0.
 
 # Running 
 
-To run, you just need to 
+To run, you just need to get the Dgraph GraphQL backend running with
+
+```sh
+./deploy/dev-setup/run.sh up
+```
+
+That brings up Dgraph in a docker container and adds the seed data.
+
+Then
 
 ```
 yarn install
 yarn start
 ```
 
+Brings up the React app.
+
 # How it was built
 
 There's a blog about building this app (FIXME: insert link)

apollo.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    client: {
+      service: {
+        name: 'local',
+        url: 'http://localhost:8080/graphql',
+      },
+      includes: ["src/**/operations.graphql", "deploy/**/operations.graphql"],
+      excludes: ["src/**/*.{ts}", "deploy/**/*.{ts}"]
+    }
+  };

codegen.yml

@@ -0,0 +1,23 @@
+overwrite: true
+schema: "http://localhost:8080/graphql"
+documents: 
+  - 'src/**/*.graphql'
+  - 'deploy/**/*.graphql'
+generates:
+  src/types/graphql.ts:
+    plugins:
+      - typescript
+  src/:
+    preset: near-operation-file
+    presetConfig:
+      baseTypesPath: types/graphql
+      folder: types
+      extension: .ts
+    plugins:
+      - typescript-operations
+      - typescript-react-apollo
+    config:
+      reactApolloVersion: 3
+      withHOC: false
+      withHooks: true
+      withComponent: false

deploy/.gitignore

@@ -0,0 +1,3 @@
+config.json
+config-dev.json
+config-prod.json

deploy/dev-setup/load-data.ts

@@ -0,0 +1,114 @@
+import fetch from "cross-fetch"
+import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client"
+import { GraphQLError } from "graphql"
+import { AddCategoryInput, AddPostInput } from "../../src/types/graphql"
+import {
+  InitCategoriesMutation,
+  InitCategoriesMutationVariables,
+  InitCategoriesDocument,
+  InitPostsMutation,
+  InitPostsMutationVariables,
+  InitPostsDocument,
+} from "./types/operations"
+
+const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: new HttpLink({
+    uri: "http://localhost:8080/graphql",
+    fetch: fetch,
+  }),
+})
+
+const categories: Array<AddCategoryInput> = [
+  { name: "GraphQL" },
+  { name: "Dgraph" },
+  { name: "React" },
+]
+
+const qsQuote = `
+With Dgraph you design your application in GraphQL. You design a set of GraphQL types that describes your requirements. Dgraph takes those types, prepares graph storage for them and generates a GraphQL API with queries and mutations.
+
+You design a graph, store a graph and query a graph. You think and design in terms of the graph that your app is based around.
+`
+
+const docsQuote = `
+Dgraph creates a GraphQL API from nothing more than GraphQL types. That's great, and gets you moving fast from an idea to a running app. However, at some point, as your app develops, you might want to customize the behaviour of your schema.
+
+In Dgraph, you do that with code (in any language you like) that implements custom resolvers.
+
+Dgraph doesn't execute your custom logic itself. It makes external HTTP requests. That means, you can deploy your custom logic into the same Kubernetes cluster as your Dgraph instance, deploy and call, for example, AWS Lambda functions, or even make calls to existing HTTP and GraphQL endpoints.
+`
+
+const posts: Array<AddPostInput> = [
+  {
+    title: "My first post about GraphQL",
+    text: qsQuote,
+    category: { name: "GraphQL" },
+  },
+  {
+    title: "Let me quote from the docs",
+    text: docsQuote,
+    category: { name: "GraphQL" },
+  },
+  {
+    title: "I know some things about Dgraph",
+    text: "It's a GraphQL native DB written from the disk up in Go.",
+    category: { name: "Dgraph" },
+  },
+  {
+    title: "How should I layout my components?",
+    text: "Oh man, I can do the code, but the layout, that's not my thing.",
+    category: { name: "React" },
+  },
+  {
+    title: "Where should I deploy my frontend app?",
+    text: "Currently",
+    category: { name: "React" },
+  },
+]
+
+async function installData(): Promise<Readonly<GraphQLError[]> | undefined> {
+  const { data: categoryData, errors: categoryErrors } = await client.mutate<
+    InitCategoriesMutation,
+    InitCategoriesMutationVariables
+  >({
+    mutation: InitCategoriesDocument,
+    variables: { categories },
+  })
+
+  if (categoryErrors || !categoryData?.addCategory?.category ) {
+    return categoryErrors
+  }
+
+  console.log(`added ` + categoryData.addCategory.category.length + ` users`)
+
+  for (let cat of categoryData.addCategory.category) {
+    for (let post of posts) {
+      if (cat && cat.name === post.category.name) {
+        post.category.id = cat.id
+      }
+    }
+  }
+
+  const { data: postsData, errors: postsErrors } = await client.mutate<
+    InitPostsMutation,
+    InitPostsMutationVariables
+  >({
+    mutation: InitPostsDocument,
+    variables: { posts },
+  })
+
+  if (postsErrors || !postsData?.addPost?.post) {
+    return postsErrors
+  }
+
+  console.log(`added ` + postsData.addPost.post.length + ` posts`)
+}
+
+const result = installData()
+result.then((errs) => {
+  if (errs) {
+    console.log(`Failed !`)
+    console.log(errs)
+  }
+})

deploy/dev-setup/operations.graphql

@@ -0,0 +1,16 @@
+mutation InitCategories($categories: [AddCategoryInput!]!) {
+    addCategory(input: $categories) {
+        category {
+            id
+            name
+        }
+    }
+}
+
+mutation InitPosts($posts: [AddPostInput!]!) {
+    addPost(input: $posts) {
+        post {
+            id
+        }
+    }
+}

deploy/dev-setup/run.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+set -e
+
+# run this from the project root dir.  e.g.:
+#
+# ./deploy/dev-setup/run.sh u
+
+up() {
+    docker run --rm -p 8080:8080 -p 9080:9080 -p 8000:8000 dgraph/standalone:master > deploy/dgraph.log 2>&1 &
+    echo "** Starting Dgraph"
+    sleep 20s
+    echo "** Adding Schema"
+    curl -X POST localhost:8080/admin/schema --data-binary '@deploy/schema.graphql'
+    echo
+    echo "** Loading Seed Data"
+    yarn run load-data
+}
+
+down() {
+    echo "not implemented :-( do 'docker ps', find the dgraph container, kill it"
+}
+
+if [ $# -gt 0 ]; then
+    if [ $1 == 'up' ]; then
+        up
+    elif [ $1 == 'down' ]; then
+        down
+    else
+        echo "up (to start the dev environment, or down (to stop dev environment))"
+    fi
+else
+    echo "up (to start the dev environment, or down (to stop dev environment))"
+fi

deploy/dev-setup/types/operations.ts

@@ -0,0 +1,108 @@
+import * as Types from '../../../src/types/graphql';
+
+import gql from 'graphql-tag';
+import * as ApolloReactCommon from '@apollo/client';
+import * as ApolloReactHooks from '@apollo/client';
+
+export type InitCategoriesMutationVariables = Types.Exact<{
+  categories: Array<Types.AddCategoryInput>;
+}>;
+
+
+export type InitCategoriesMutation = (
+  { __typename?: 'Mutation' }
+  & { addCategory?: Types.Maybe<(
+    { __typename?: 'AddCategoryPayload' }
+    & { category?: Types.Maybe<Array<Types.Maybe<(
+      { __typename?: 'Category' }
+      & Pick<Types.Category, 'id' | 'name'>
+    )>>> }
+  )> }
+);
+
+export type InitPostsMutationVariables = Types.Exact<{
+  posts: Array<Types.AddPostInput>;
+}>;
+
+
+export type InitPostsMutation = (
+  { __typename?: 'Mutation' }
+  & { addPost?: Types.Maybe<(
+    { __typename?: 'AddPostPayload' }
+    & { post?: Types.Maybe<Array<Types.Maybe<(
+      { __typename?: 'Post' }
+      & Pick<Types.Post, 'id'>
+    )>>> }
+  )> }
+);
+
+
+export const InitCategoriesDocument = gql`
+    mutation InitCategories($categories: [AddCategoryInput!]!) {
+  addCategory(input: $categories) {
+    category {
+      id
+      name
+    }
+  }
+}
+    `;
+export type InitCategoriesMutationFn = ApolloReactCommon.MutationFunction<InitCategoriesMutation, InitCategoriesMutationVariables>;
+
+/**
+ * __useInitCategoriesMutation__
+ *
+ * To run a mutation, you first call `useInitCategoriesMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useInitCategoriesMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [initCategoriesMutation, { data, loading, error }] = useInitCategoriesMutation({
+ *   variables: {
+ *      categories: // value for 'categories'
+ *   },
+ * });
+ */
+export function useInitCategoriesMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<InitCategoriesMutation, InitCategoriesMutationVariables>) {
+        return ApolloReactHooks.useMutation<InitCategoriesMutation, InitCategoriesMutationVariables>(InitCategoriesDocument, baseOptions);
+      }
+export type InitCategoriesMutationHookResult = ReturnType<typeof useInitCategoriesMutation>;
+export type InitCategoriesMutationResult = ApolloReactCommon.MutationResult<InitCategoriesMutation>;
+export type InitCategoriesMutationOptions = ApolloReactCommon.BaseMutationOptions<InitCategoriesMutation, InitCategoriesMutationVariables>;
+export const InitPostsDocument = gql`
+    mutation InitPosts($posts: [AddPostInput!]!) {
+  addPost(input: $posts) {
+    post {
+      id
+    }
+  }
+}
+    `;
+export type InitPostsMutationFn = ApolloReactCommon.MutationFunction<InitPostsMutation, InitPostsMutationVariables>;
+
+/**
+ * __useInitPostsMutation__
+ *
+ * To run a mutation, you first call `useInitPostsMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useInitPostsMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [initPostsMutation, { data, loading, error }] = useInitPostsMutation({
+ *   variables: {
+ *      posts: // value for 'posts'
+ *   },
+ * });
+ */
+export function useInitPostsMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<InitPostsMutation, InitPostsMutationVariables>) {
+        return ApolloReactHooks.useMutation<InitPostsMutation, InitPostsMutationVariables>(InitPostsDocument, baseOptions);
+      }
+export type InitPostsMutationHookResult = ReturnType<typeof useInitPostsMutation>;
+export type InitPostsMutationResult = ApolloReactCommon.MutationResult<InitPostsMutation>;
+export type InitPostsMutationOptions = ApolloReactCommon.BaseMutationOptions<InitPostsMutation, InitPostsMutationVariables>;

deploy/schema.graphql

@@ -0,0 +1,12 @@
+type Post {
+    id: ID!
+    title: String!
+    text: String!
+    category: Category! @hasInverse(field: posts)
+}
+
+type Category {
+    id: ID!
+    name: String!
+    posts: [Post]
+}

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "cross-fetch": "^3.0.5",
     "graphql": "^15.1.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
@@ -25,7 +26,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "generate-types": "graphql-codegen --config codegen.yml"
+    "generate-types": "graphql-codegen --config codegen.yml",
+    "load-data": "ts-node -O '{\"module\": \"commonjs\"}' deploy/dev-setup/load-data.ts"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -49,6 +51,7 @@
     "@graphql-codegen/typescript": "^1.15.4",
     "@graphql-codegen/typescript-operations": "^1.15.4",
     "@graphql-codegen/typescript-react-apollo": "^1.15.4",
-    "@types/react-router-dom": "^5.1.5"
+    "@types/react-router-dom": "^5.1.5",
+    "ts-node": "^8.10.2"
   }
 }