vincentntang / graphql-movie-quotes Goto Github PK

Please see my slidedeck for an overview of what GraphQL is, before going through the demo

https://slides.com/vincentntang/fullstack-graphql-nodejs-react#/

1. MovieList - A list of all movies are shown
2. MovieCreate - Create movie form
3. Movie - A detailed movie item

• 01-frontend-only -> only has the frontend, starting point of demo
• 02-frontend-backend-graphql -> same frontend, but finished standalone backend
• 03-connected-frontend-backend -> same as master, fullstack integration

Globally install these dependencies anywhere

npm install -g nodemon

To install this repo, install the frontend and run

cd frontend
npm install
npm run start

In a seperate terminal, install backend and run

cd backend
npm install
npm run start

Once the backend is running, go to:

localhost:4000/graphql and try running these queries/mutations

query {
  movies {
    movie_id
    title
    year
    plot
    poster
    quotes {
      quote_id
      description
    }
  }
}

query Movie($movie_id: ID){
  movie(movie_id: $movie_id) {
    title
    year
    plot
    poster
    quotes {
      quote_id
      description
    }
  }
}

Query variables

{
  "movie_id": "tt0468569"
}

mutation CreateMovie($input: MovieInput!) {
  createMovie(input: $input) {
    movie_id
    title
    year
    plot
  }
}

Query Variables

{
  "input": {
    "title": "The Water Boy"
    "year": "1998"
    "plot": "Adam Sandler is no longer just a waterboy"
  }
}