vinicunca

vinicunca demonstrates how GraphQL can be utilized for querying services and databases.

Feature Components

• Build a GraphQL server and client
• Provide query-able building
• Routing, Apollo statement management, UI app components

---

Server

Requirements

Docker for Mac
Docker for Windows
NodeJS >= 10

Start Server

start mongodb server docker-compose up

start node app npm start

Development

install pm2 npm install pm2 -g

to start the server in watch mode use npm run start:dev

Project structure

mongodb folder contains the data for the mongodb database

routes/api contains the apis code for this server, we will call this from now on.

<API>/models contains the mongoose models used to perform operations on the mogodb database.

<API>/rest contains code for the rest api

<API>/rest/swagger.yml Rest api swagger file. You can see the content using the swagger ui started by docker-compose.

<API>/graph contains code for the graphql api

---

Client

Requirements

NodeJS >= 10

Start Client

start node app npm start

Program Structure

remote-schema.graphql schema for the graphql service consumed by this app

.graphqlconfig intellij's JSGraphql plugin configuration file

tsconfig.json TypeScript compiler config file

mutation and queries folder contains the mutation and queries used by the Items components

types folder holds all the typescript type definitions used across the app

types/external holds the types for the eternal libraries that do not provide @types

index.tsx configures apollo client and defines the app routes

components/Items defines the screen for the items route

components/Orders defines the screen for the orders route

---

Sample Query

query ($orderId: String!){
   order(id: $orderId) { 
     _id
     itemId
     qty
     user {
       name
       email
     }
     item {
       name: item
       inStock: qty
     }
   }
}

Sample JSON output

{
   "data": {
     "order": [
       {
         "_id": "5cec0e0eedd378874f1e49d3",
         "itemId": "5cec3997465682b928789f8",
         "qty": 4, 
         "user": {
           "name": "Higgs Boson",
           "email" "[email protected]"
         }. 
         "item": {
           "name": "journal",
           "inStock": 50
         }
       }
     ]
   }
 }

---

UI Screengrabs

---

Sample Network Results

---

Down the Rabbit Hole

GraphQL
Client-side GraphQL
Apollo
Using Apollo with Typescript
node-sass
react redux

---

License

vinicunca is free software, and may be redistributed under the terms dictated in the LICENSE file.