graboskyc / MongoDBStitchGraphQL

Part of a workshop for MongoDB Atlas in Feb of 2020

MongoDBStitchGraphQL

A hands on workshop run by MongoDB for the Philadelphia area on Feb 26, 2020.

Here we will use MongoDB Atlas, MongoDB Stitch, and Stitch's new GraphQL interface. This will serve as a simple tutorial and introduction to GraphQL and Stitch.

Initial Setup Guide

• Deploy a MongoDB Atlas cluster
• Load the sample dataset (we will be using sample_mflix movies database)
• Create a stitch application. This will take up to five minutes to load, then take you to the Stitch application.

• Define a rule such that everyone can only read the sample_mflix.movies collection

• Create a new custom rule by clicking the plus button, choosing the sample_mflix database, typing in opinions in the collection box, clicking Create opinions, choose the rule of Users can only read and write their own data, type owner in the field name, then click Create

• Press the Review & Deploy Changes button on the top blue bar, then the green Deploy button

• Generate a schema for the movies collection by clicking movies then Schema and we can Generate Schema since there is already data in the collection. Then click Save

• Click on the opinions collection and it's schema tab.
• Paste in this new schema:

{
  "title": "opinions",
  "properties": {
    "_id": {
      "bsonType": "objectId"
    },
    "owner": {
      "bsonType": "string"
    },
    "opinion": {
      "bsonType": "string"
    },
    "rated": {
      "bsonType": "double"
    },
    "title": {
      "bsonType": "string"
    }
  }
}

• Press the Review & Deploy Changes button on the top blue bar, then the green Deploy button

• We will now create username/password authentication for users. Click the Users button, then Providers, then the Edit button next to Email/Password

• Enable the provider, choose "automatically confirm users" radio button, choose Run a password reset function, call the function reset and leave everything defaults as this is all outside of scope for today's exercise. Click Save

• Press the Review & Deploy Changes button on the top blue bar, then the green Deploy button

• Click the Add a new user button and put in your email address and a password and create the user.

• Once the user is added, press the copy button next to the user ID. You will need this in future steps.

• Click on the GraphQL button for the next series of steps.

GraphQL Sample Queries

MOVIE: Random movie

Find a random movie and return just it's ID, title, and release year

query {
  movie {
        _id
		title
		year
  }
}

MOVIE: Specific Movie Details

Given a specific title, return just its ID, title, year, rated, and runtime

query {
  movie(query:{ title:"Ghostbusters"}) {
    _id
    title
    year
    rated
    runtime
  }
}

GraphQL Sample Mutations

OPINIONS: Log your opinions

Replace the GUID with your ID you copied earlier

mutation {
  insertOneOpinions(
    data : { title:"Ghostbusters",
    rated:10,
    opinion:"Greatest movie ever",
    owner:"5e4ea9daa329830aaaee66ef"}
  ) { title, rated }
}

mutation {
  insertOneOpinions(
    data : { title:"John Wick",
    rated:9.5,
    opinion:"great fight scenes",
    owner:"5e4ea9daa329830aaaee66ef"}
  ) { title, rated, _id, owner }
}

• After this is complete, on the top left of the Stitch screen there is a button to return togo Back to Atlas. Press that or open cloud.mongodb.com in a new tab.
• Click the Collections button on your cluster, then go to the sample_mflix database.
• You should now see a new collection called opinions with your opinions in there!

GraphQL Sample Queries

OPINIONS: Your opinions

Replace the GUID with your ID you copied earlier

query {
  opinions(query:{owner:"5e4ea9daa329830aaaee66ef"}) {
    _id
    title
    rated
    owner
    opinion
  }
}

Testing Outside of Stitch

Get your access token via REST:

• Open a new tab in your browser to APITester.com
• Change the request type to POST
• In the URL field enter https://stitch.mongodb.com/api/client/v2.0/app/<YOURAPPID>/auth/providers/local-userpass/login and replace <YOURAPPID> with the value in the top left corner of the Stitch console
• In post data, set the body to the following, entering the email and password you created earlier in Stitch:

{
    "username": "YOUREMAILADDRESSHERE",
    "password": "YOURPASSWORDHERE"
  }

• Press the Add Request Header button and set the Name to Content-Type and the Value to application/json
• Press the Test button and you should get your access_token in the Response Body section

Make your GraphQL Queries

• Open a new tab in your browser to altair-gql.sirmuel.design/
• In the POST field, copy and paste the GraphQL Endpoint URL from the GraphQL page within the Stitch console
• Press the star-looking button directly to the left to Set Headers
• Click the Add header button
• Set the Header key to Authorization
• Set the Header value to Bearer followed by the long string from the access_token you got in the last step such that it looks something like Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1ODIyMjcxMDgsImlhdCI6MWNjZXNzIn0.x-jik_SjKn5zXamRwN5kxxnfBOGilaVrMfIjA0W7MZQ
• In the left column enter the 2 movie query from the previous section and the 1 query for the opinions. Once you type a valid query, a (Run query) button appears so press it. You should see the results on the right column
• Feel free to add another mutation here for another of your favorite movies as shown in the mutation section above