in

A simple Java backend graphQL service built with Spring Initializr and react



License Apache2
Discord

50 minutes, Beginner/Intermediate, Start Building

Both a simple graphQL enabled ReactJS app built using create-react-app AND a simple Java backend graphQL service built with Spring Initializr and using The Netflix DGS framework PLUS Astra DB hooked up and ready to rock! 😻

This is a companion to our Netflix Clone using Astra DB and GraphQL workshop and is essentially a “prologue” to that content. Once complete, feel free to to go deploy a Netflix clone using what you learned here.

Finally, this content uses React/JS concepts. If you are not familiar with those or need a refresher, take a look HERE to get up to date.

The materials have been built by the DataStax developer advocates team.

image

Don’t forget to complete your upgrade and get your verified skill badge! Finish and submit your homework!

  1. Complete the practice steps from this repository as described below through step 9
  2. Insert (mutate) a show or genre of your choice in the database.
  3. Make a single screenshot of the React app with all of the working Astra DB sections
  4. Submit your homework here

That’s it, you are done! Expect an email within about a week!

Extra resources

graphql.org – The first place to learn about GraphQL

The Netflix DGS framework Tutorial – Java/Spring GraphQL backend (used to generate this code)

Spring Initializr – Used in the ^above tutorial to generate the Java/Spring backend starter

GraphiQL – GraphQL IDE included with The Netflix DGS Framework

Apollo client – Awesome GraphQL client for React/JS (not used here, but really solid, Netflix uses this)

Top 7 GraphQL IDEs – A nice collection of cool GraphQL IDEs to use

create-react-app tutorial – Create a React app from scratch (used to generate this code)

A Beginner’s Guide to GraphQL – Ali Spittel’s really awesome GraphQL starter video

  • Show me!

Use the following values when creating the database

Field Value
database name netflix_workshop_db
keyspace netflix_keyspace
Cloud Provider Use the one you like, click a cloud provider logo, pick an Area in the list and finally pick a region.

You can technically use whatever you want and update the code to reflect the keyspace. This is really to get you on a happy path for the first run.

You will see your new database pending OR initializing in the Dashboard.

image

The status will change to Active when the database is ready, this will only take 2-3 minutes. You will also receive an email when it is ready.

🏠 Back to Table of Contents

Create a token for your app to use in the settings screen. Use “Database Administrator” permission.

Step 2b: Copy the token value (eg AstraCS:KDfdKeNREyWQvDpDrBqwBsUB:ec80667c....) in your clipboard and save the CSV, this value would not be provided afterward.

👁️ Expected output

  • Show me!

🏠 Back to Table of Contents

Gitpod is an 100% online IDE based on VS Code. To initialize your environment simply click on the button below (CTRL + Click to open in new tab) You will be asked for you github account, as needed.

Open in Gitpod

This will startup your demo environment. Be patient, it will take a couple minutes as everything loads up.

You may be asked if it’s OK to launch a new tab (for the GraphiQL IDE that will be used subsequently. Click on Open to make sure the new tab opens as shown below.

image

The Netflix DGS framework comes with GraphiQL already integrated and ready for use. This is a wonderful tool you can use to explore graphQL queries and mutations. Let’s experiement with this now!

Screen Shot 2021-09-14 at 10 56 10 AM

image

Note that values in the picture do no reflect the database name netflix_workshop_db, reason is we do not reproduce every picture each time

image

image

🏠 Back to Table of Contents

image

🏠 Back to Table of Contents

image

🏠 Back to Table of Contents

Screen Shot 2021-09-13 at 9 42 46 PM

This will add a set of envrionment variables for database authentication to your .env file at the root of workshop-intro-to-graphql/graphql-client-examples. It should look something like this.

Screen Shot 2021-09-13 at 9 45 41 PM

Screen Shot 2021-09-13 at 10 00 26 PM

Screen Shot 2021-09-13 at 10 22 16 PM

Screen Shot 2021-09-13 at 10 25 31 PM

Screen Shot 2021-09-13 at 10 34 26 PM

Screen Shot 2021-09-13 at 10 34 34 PM

Screen Shot 2021-09-13 at 10 39 50 PM

Screen Shot 2021-09-13 at 10 39 58 PM

Screen Shot 2021-09-13 at 10 41 03 PM

HOMEWORK

GitHub

https://github.com/datastaxdevs/workshop-intro-to-graphql


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Amazfit Smartwatches Now Start at Rs 3499 Only

Micro-SaaS — All you need to build bootstrap SaaS at one place