[docs] Update GraphQL playground tutorial docs (#7863)

* Update graphql playground tutorial docs * Update graphql screenshots to new version * Update readme to specify image upload method
redwoodjs · Mar 24, 2023 · 2476f96 · 2476f96
1 parent 93864e7
commit 2476f96
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -28,12 +28,15 @@ In [previous section](./first-page) we....
 
 ## Contributing
 
-Open a PR against the repo on GitHub. That will build and launch a copy of the site that you can get from the `netlify/redwoodjs/deploy-preview` check (click "Details" to open it):
+Fork the repo, make your changes and open a PR on GitHub. That will build and launch a copy of the site that you can get from the `netlify/redwoodjs/deploy-preview` check (click "Details" to open it):
 
 ![image](https://user-images.githubusercontent.com/300/76569613-c4421000-6470-11ea-8223-eb98504e6994.png)
 
 Double check that your changes look good!
 
+### Updating Doc Images
+To update any images in the doc, first upload your screenshot into a comment textbox in your PR. Once it's uploaded, you can open the image in a new tab and use the github url as a image link in your docs.
+
 ## Contributors
 
 Redwood is amazing thanks to a wonderful [community of contributors](https://github.com/redwoodjs/redwood/blob/main/README.md#contributors).
diff --git a/docs/docs/tutorial/chapter3/saving-data.md b/docs/docs/tutorial/chapter3/saving-data.md
@@ -347,15 +347,15 @@ Often it's nice to experiment and call your API in a more "raw" form before you
 
 When you started development with `yarn redwood dev` (or `yarn rw dev`) you actually started a second process running at the same time. Open a new browser tab and head to [http://localhost:8911/graphql](http://localhost:8911/graphql) This is GraphQL Yoga's [GraphiQL](https://www.graphql-yoga.com/docs/features/graphiql), a web-based GUI for GraphQL APIs:
 
-<img width="1410" alt="image" src="https://user-images.githubusercontent.com/32992335/161488164-37663b8a-0bfa-4d52-8312-8cfaac7c2915.png" />
+<img width="1410" alt="image" src="https://user-images.githubusercontent.com/22184161/226866579-896e8edc-4ac0-48bd-80f0-2ba28da677b5.png" />
 
-Not very exciting yet, but select the "Docs" tab on the far right and click on `query: Query`.
+Not very exciting yet, but select the "Docs" tab on the top left and click on `query: Query`.
 
-<img width="1410" alt="image" src="https://user-images.githubusercontent.com/32992335/161487889-8525abd6-1b44-4ba6-b637-8a3426f53197.png" />
+<img width="1410" alt="image" src="https://user-images.githubusercontent.com/22184161/226866573-41697d10-a056-4e3a-add3-b940147de802.png" />
 
 It's the complete schema as defined by our SDL files! The Playground will ingest these definitions and give you autocomplete hints on the left to help you build queries from scratch. Try getting the IDs of all the posts in the database; type the query at the left and then click the "Play" button to execute:
 
-<img width="1410" alt="image" src="https://user-images.githubusercontent.com/32992335/161488332-53547702-81e7-4c8b-b674-aef2f3773ace.png" />
+<img width="1410" alt="image" src="https://user-images.githubusercontent.com/22184161/226866554-3daefe7f-7b4d-4503-aaa0-9895ee5bd38e.png" />
 
 The GraphQL Playground is a great way to experiment with your API or troubleshoot when you come across a query or mutation that isn't behaving in the way you expect.