Skip to content

build a graphQL client and server to execute queries

License

Notifications You must be signed in to change notification settings

lhmzhou/vinicunca

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

ui snapshot -- orders

ui snapshot -- items


Sample Network Results

service query network screenshot (a)

service query network screenshot (b)


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.

About

build a graphQL client and server to execute queries

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published