In this article, we're going to walk through some of the basic setup for Slash GraphQL and then take a look at how I built a with React and Slash GraphQL in just a few hours! Pokémon Pokédex app Frontend developers want interacting with the backend of their web application to be as painless as possible. Requesting data from the database or making updates to records stored in the database should be simple so that frontend developers can focus on what they do best: creating beautiful and intuitive user interfaces. makes working with databases easy. Rather than relying on backend developers to create specific API endpoints that return pre-selected data fields when querying the database, frontend developers can make simple requests to the backend and retrieve the exact data that they need—no more, no less. This level of flexibility is one reason why GraphQL is so appealing. GraphQL Even better, you can use a GraphQL backend — (by ). This service is brand new and was . With Slash GraphQL, I can create a new backend endpoint, specify the schema I want for my , and — — be up and running in just a few steps. hosted Slash GraphQL Dgraph publicly released on September 10, 2020 graph database voila! The beauty of a hosted backend is that you don't need to manage your own backend infrastructure, create and manage your own database, or create API endpoints. All of that is taken care of for you. You can . view all of the code here on GitHub Update: On April 16th, 2021, Slash GraphQL was officially renamed Dgraph Cloud. The information below still applies, and you can still build the app as described. Overview of the Demo Pokédex App The Pokémon Pokédex app I built What 90s child (or adult, for that matter) didn't dream of catching all 150 original Pokémon? Our demo app will help us keep track of our progress in becoming Pokémon masters. As we build out our app, we'll cover all the CRUD operations for working with an API: create, read, update, and delete. We'll start by adding all our Pokémon to the database online in Slash GraphQL's API Explorer. Then, in the Pokédex app UI, we'll display all 151 Pokémon queried from the database. (Hey, I couldn't leave out Mew, could I?) At the top of the screen, we'll show two dropdown menus that will allow us to filter the shown results by Pokémon type and by whether or not the Pokémon has been captured. Each Pokémon will also have a toggle switch next to it that will allow us to mark the Pokémon as captured or not. We won't be deleting any Pokémon from our database via the app's UI, but I'll walk you through how that could be done in the event that you need to clean up some data. Ready to begin our journey? Getting Started with Slash GraphQL: Creating a New Backend for our Pokédex App Once you've created your account, you can have your GraphQL backend up and running in just a few steps: Slash GraphQL Click the "Create a Backend" button. Give it a name. (For example, I chose "pokedex".) Optionally, give the API endpoint URL a subdomain name. (Again, I chose "pokedex".) Optionally, choose a provider and a zone. (This defaults to using AWS in the US West 2 region.) Click the "Create New Backend" button to confirm your choices. Get your backend endpoint. (Mine looks like this: .) https://pokedex.us-west-2.aws.cloud.dgraph.io/graphql Click the "Create your Schema" button. That's it! After creating a new backend, you'll have a live GraphQL database and API endpoint ready to go. Creating a Schema Now that we have our backend up and running, we need to create the schema for the type of data we'll have in our database. For the Pokédex app, we'll have a type and a enum. Pokémon PokémonType There's a lot to unpack in that small amount of code! The enum is straightforward enough—it's a set of all the Pokémon types, including Fire, Water, Grass, and Electric. The type describes the shape of our data that we'll have for each Pokémon. PokémonType Pokémon Each Pokémon will have an ID, a name, an image URL for displaying the Pokémon's picture, the types of Pokémon it is, and a status indicating whether or not the Pokémon is captured. You can see that each field has a data type associated with it. For example, is an (integer), and are types, and is a . The presence of an exclamation point means the field is required. Finally, adding the keyword makes the field searchable in your queries and mutations. id Int name imgUrl String captured Boolean ! @search To test out working with our database and newly created schema, we can use the API Explorer, which is a neat feature that allows us to run queries and mutations against our database right from within the Slash GraphQL web console. Populating Our Pokémon Database Let's use the API Explorer to insert all of our Pokémon into the Pokédex App database. We'll use the following mutation: For brevity I've only shown the first nine Pokémon in the snippet above. Feel free to check out the . full code snippet for adding all the Pokémon Adding all the Pokémon via the API Explorer Now, for a quick sanity check, we can query our database to make sure that all our Pokémon have been added correctly. We'll request the data for all our Pokémon like so: Here's what it looks like in the API Explorer: Querying for all Pokémon in the API Explorer We could also write a similar query that only returns the Pokémon names if that's all the data we need. Behold, the beauty of GraphQL! Querying for all Pokémon names in the API Explorer Fetching Data in the App Now that we've added our Pokémon to the Pokédex app and verified the data is in fact there, let's get it to show up in our app. Our app was built with and for the frontend and was bootstrapped using . React Material UI create-react-app We won't be going through step-by-step how to build the app, but we'll highlight some of the key parts. Again, the if you'd like to clone the repo or just take a look. full code is available on GitHub When using Slash GraphQL in our frontend code, we essentially just make a POST request to our single API endpoint that we were provided when creating the backend. In the body of the request, we provide our GraphQL code as the , we write a descriptive name for the query or mutation as the , and then we optionally provide an object of any we reference in our GraphQL code. query operationName variables Here's a simplified version of how we follow this pattern to fetch our Pokémon in the app: We then take that data and loop over it using the Array helper function to display each Pokémon in the UI. map The filters at the top of the page are hooked up to our API as well. When the filter values change, a new API request kicks off, but this time with a narrower set of search results. For example, here are all the Fire type Pokémon that we've captured: Captured Fire type Pokémon The JavaScript for making an API request for Pokémon filtered by type and captured status looks a little like this: Updating Data in the Pokédex App At this point we've sufficiently covered creating Pokémon from the API Explorer and fetching Pokémon within our Pokédex app via JavaScript. But what about updating Pokémon? Each Pokémon has a toggle switch that controls the Pokémon's captured status. Clicking on the toggle updates the Pokémon's captured status in the database and then updates the UI accordingly. Here is our JavaScript to update a Pokémon: We then call the function when the toggle value changes. This kicks off the API request to update the value in the database. updatePokemonCapturedStatus Then, we can either optimistically update the UI without waiting for a response from the backend, or we can wait for a response and merge the result for the single Pokémon into our frontend's larger dataset of all Pokémon. We could also simply request all the Pokémon again and replace our frontend's stored Pokémon info with the new result, which is what I chose to do. Deleting Data from the Database The last of the CRUD operations is "delete". We won't allow users to delete Pokémon from within the app's UI; however, as the app admin, we may need to delete any mistakes or unwanted data from our database. To do so, we can use the API Explorer again. For example, if we found that we have an extra Bulbasaur in our Pokédex, we could delete all the Bulbasaurs: Deleting all Bulbasaur Pokémon via the API Explorer Then, we could add one Bulbasaur back: Wrapping Up So, what did we learn? By now we should understand how to work with Slash GraphQL in the context of a React app. We've covered all the CRUD operations to make a pretty sweet Pokédex app. We may have even caught a few Pokémon along the way. Hopefully we didn't... ... . hurt ourselves in confusion [cue audible groans from the readers] We haven't yet covered to secure our app or how to use the when making our GraphQL requests, but those are important topics for another article! how to add authentication Apollo client As an experienced frontend developer but without much experience using GraphQL, working with Slash GraphQL was refreshingly easy. Getting set up was a breeze, and the API Explorer along with the documentation played a crucial role in helping me explore the various queries and mutations I could make with my data. Slash GraphQL, I choose you! [ ] more audible groans from the readers

Fetch

I Wish I Never Learned to Code

A Comparison Of Web Component Solutions

Check out my web portfolio!

Nominated for 2022 - HackerNoon Contributor of the Year - Games

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Nominated for 2022 - HackerNoon Contributor of the Year - Code Quality

Nominated for 2022 - HackerNoon Contributor of the Year - Natural Language Processing

Nominated for 2022 - HackerNoon Contributor of the Year - Clean Code

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

Too Long; Didn't Read

How to Build a Pokédex App with React and a Slash GraphQL Backend

How to Build a Pokédex App with React and a Slash GraphQL Backend

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

100 Pieces of Programming Advice from the Book Clean Code by Robert Martin

A Great Way To Create A Brilliant GraphQL-Powered Blog

Aerospike Graph: the Latest Entry in the Graph Database Market

Amazon Neptune Launches a New Analytics Engine and the One Graph Vision

Buckle Up and Enjoy Some Graph Therapy

Determining Communities In Graphs Using Label Propagation Algorithm

100 Pieces of Programming Advice from the Book Clean Code by Robert Martin

A Great Way To Create A Brilliant GraphQL-Powered Blog

Aerospike Graph: the Latest Entry in the Graph Database Market

Amazon Neptune Launches a New Analytics Engine and the One Graph Vision

Buckle Up and Enjoy Some Graph Therapy

Determining Communities In Graphs Using Label Propagation Algorithm

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps