emilymalecbrown/node-vue-graphql-demo

GraphQL Demo / Playground for Friends

GraphQL Intro and Playground

A project that gives a little intro to GraphQL / Node / Vue end-to-end.

Project setup and commands

Install dependencies and seed local db

yarn setup

Start local client + dev server

yarn start

Client server will be running at localhost:8080 Express server (GraphQL endpoint) will be running at localhost:3000/graphql

Building out this project

This project provides enough scaffolding to get you started playing around with GraphQL from both the client and the server. The inital starting point is missing some key pieces that need to be implemented before anything works:

I'd recommend starting with the server, and implementing the following pieces:

server/graphql.js

• Schema definition based on the data in db.json
• Our resolver needs to fetch some actual data from db.json

For the client queries

client/graphql/queries.js

• write some queries that conform to the schema we wrote on the server-side

client/store.js

• we need to use the queries that we wrote above to fetch data from the server in our actions
• then we need to set this data on the state in our mutations

** Getting Advanced **

TODO

Documentation

These are docs for the primary tools used to build this demo / playground

Server

• Nodemon - Runs node with hot reloading
• Express - Wonderful server and routing framework
• Apollo Server - Allows us to field incoming GraphQL requests
• LowDB - A super simple local JSON store, with ORM like interactions provided by lodash

Client

• Vue - Our favorite front end framework
• Vuex - State management for Vue
• GraphQL Tag - Used to build GraphQL tags from string literals
• Apollo Client - Provides tools for connection to GraphQL. Note: These docs are "for React" but remain pretty framework agnostic

Process management

• concurrently - This tool makes running the client and server in parallel easier by enabling us to run one yarn command to spin up both processes!