is a relatively new way to build user interfaces and APIs for consumers. It's essentially a querying language backed by a strongly typed schema, which makes it easy to write human-readable requests to get exactly the data you need. Compared to REST, whose responses are dictated by the server, GraphQL queries place the power squarely in the hands of the client. GraphQL However, GraphQL is really just a spec that describes an API. Many features one might expect from an API, like authorization/authentication logic, bi-directional communication, or rate limiting, still need to be implemented. Recently launched, is a fully managed GraphQL backend that takes care of all the hard work of setting up a GraphQL API, letting you concentrate on building your app. Slash GraphQL In this article, we'll be building an e-commerce bookstore that relies on Slash GraphQL. To demonstrate the flexibility of the service, we'll also be fetching data from another source— —and integrate it into our responses. the Goodreads API We'll be building our app using , so you should have at least version 12 installed on your machine. Create a directory called and navigate into it from the command line. Node.js slashql_bookstore Creating the GraphQL backend Setting up Slash GraphQL is easy—you can instantly sign-in with your GitHub account. The platform offers a free trial which will work for this article (then moves to a $9.99/mo flat fee for up to 5GB data). Setting up an account on Slash GraphQL After you've created an account, you'll need to create a new backend: Click on "Launch a New Backend". Name the backend "Bookstore". Click "Launch". That's it! You now have a server spun up for you in an AWS region. Defining the GraphQL schema Every GraphQL server has a strongly typed schema, which defines the objects and fields available to consumers. Click on "Schema", and paste the following lines: type Book { : Int!
  isbn: Int!
  title: ! @search(by: [fulltext])
  author: Author!
}

type Author { : Int!
  firstname: !
  lastname: !
} id String id String String Here we've defined two types—`Book` and `Author`—which will represent the data in our API. Of the many niceties Slash GraphQL provides, its support for custom directives is one of the most convenient. Here, for example, by annotating the `title` field with , we're able to provide a fuzzy text with no additional work. @search Click "Deploy" to send this schema to production. Setting up the data Let's move on to inserting data. We can use the API Explorer to not only add data, but query for it, too. In order to populate our GraphQL backend, we'll define a list of books and their authors through a mutation that Slash GraphQL conveniently provides for us, based on our schema: mutation AddData {
  addBook(input: [
    { : , : , : , : { : , : , : }},
    { : , : , : , : { : , : , : }},
    { : , : , : , : { : , : , : }},
    { : , : , : , : { : , : , : }},
    { : , : , : , : { : , : , : }},
    { : , : , : , : { : , : , : }}
    ]) {
  numUids
  }
} id 1 title "The Sound and The Fury" isbn 9780394747743 author id 1 firstname "William" lastname "Faulkner" id 2 title "Light in August" isbn 9780394711898 author id 1 firstname "William" lastname "Faulkner" id 3 title "Giovanni's Room" isbn 9780141032948 author id 2 firstname "James" lastname "Baldwin" id 4 title "The Fire Next Time" isbn 9780140182750 author id 2 firstname "James" lastname "Baldwin" id 5 title "To The Lighthouse" isbn 9780140274165 author id 3 firstname "Virginia" lastname "Woolf" id 6 title "Orlando" isbn 9780241284643 author id 3 firstname "Virginia" lastname "Woolf" Click the giant Play button to have this data added to the backend. Now, let's run a query to verify that this data is present: query GetBooks {
  queryBook {
    title
    isbn
    author {
      firstname
      lastname
    }
  }
} You should see a response back that shows all of the data you previously inserted. Building the server We'll now use to set up a basic API server that will provide users access to this Slash GraphQL source. Our Express server acts as little more than an interface to hand requests off to Slash GraphQL. Its most important lines are these: Express BACKEND_URL = { result = axios({ : , : BACKEND_URL, : { : ,
    }, : .stringify({ : operationsDoc,
      variables,
    }),
  }) result.data
} query = app.get( , jsonParser, (req, res) => { gqlResponseData = fetchGraphQL(query,  {})
  res.render( , { : gqlResponseData.data.queryBook })
}) const "https://rampant-arm.us-west-2.aws.cloud.dgraph.io/graphql" async ( ) function fetchGraphQL operationsDoc, variables const await method 'POST' url headers 'Content-Type' 'application/json' data JSON query return const `
query {
  queryBook {
    title
    isbn
    author {
      firstname
      lastname
    }
  }
}
` '/' async let await 'index' books Here, we've defined a helper function, fetchGraphQL, which sets up the necessary headers and data to send over to Slash GraphQL. Keep in mind that you'll need to change BACKEND_URL to match the URL which Slash GraphQL gives you. Then, we write a GraphQL query that defines the data that we want. Finally, we set up a route to fetch that data, and then render it in our view: <div = >
  {{#each books}}
  <div = > <h2>{{title}}</h2> <h4>{{author.firstname}} {{author.lastname}}</h4> <p><strong>ISBN:</strong> {{isbn}}</p> < each}}
< class "container" class "row" < = > div class "col-md-4" </ > div /div>
  <hr>
  {{/ /div> Our view is backed by , which is a popular templating library. We can feed our JSON data into an HTML fragment and iterate over the keys and values, which makes it much easier to display the information. Here we're using an #each loop to go over every book returned by the GraphQL API, and then plugging the data into HTML tags. You'll notice that we have placeholders that match the names of the JSON keys; these are replaced by the real data when the page is viewed. handlebars After you npm install all the dependencies, run the server with node server.js. Then, head on over to localhost:3000 in your browser: You should get back the exact same response that Slash GraphQL's API Explorer did. Extend the server As a final step, we want to expose some reviewer data about these books. But we don't want to create dummy data here; instead, we'll use . Make sure you set up an account there and get an API key before continuing. the Goodreads API One of the many things that Slash GraphQL excels at is the ability to stitch together disparate sources of data into one GraphQL interface. Perhaps you'll want to make calls to other API endpoints that are under your control. To support this, Slash GraphQL provides the directive, which allows you to implement custom behavior for GraphQL fields and resolvers. @custom First, let's add our rating information to the existing schema: type Rating @remote { : Int!
  average_rating: Float!
} ratings_count Our Rating type defines field names which we expect from . We don't need to define every single field that their REST API provides, only the ones we're interested in. Slash GraphQL will know how to transform that response into a GraphQL one. the book.show_by_isbn API On the field side of things, we'll need to specify the URL we want to call out to, along with the HTTP method: type Book {
  # ...
  rating: Rating @custom(http: { : , : GET
  })
  # ...
} url "https://goodreads-api-munger.glitch.me?isbn=$isbn" method You'll notice here that we're actually calling out to . The Goodreads API doesn't return JSON data in a nice, neat format. We'll be calling out to an intermediary server which will munge the data into a more legible format. The details of this server aren't all that important (but you can check it out if you want to). What is important is noting that this URL can stand in for anything, which can be super helpful if you're interacting with data that you own. a Glitch project The other amazing thing is that Slash GraphQL will substitute data for you. See that part of the URL that says $isbn? Depending on the object returned by our query, Slash GraphQL will substitute in the real field value for that variable. This keeps your URL requests flexible and easy to manage. That's all that we need to do to bring in some custom data. Our GraphQL query can now simply add this rating field to bring in that external data. Let's replace the query in our server.js with this one: query = const `
query {
  queryBook {
    title
    isbn
    rating {
      ratings_count
      average_rating
    }
    author {
      firstname
      lastname
    }
  }
}
` And, let's update the view to show this information: <div = >
  {{#each books}}
    <div = > <h2>{{title}}</h2> <h4>{{author.firstname}} {{author.lastname}}</h4> <p><strong>ISBN:</strong> {{isbn}}</p> <p>Rating: {{rating.average_rating}} (out of {{rating.ratings_count}} votes)</p> < each}}
< class "container" class "row" < = > div class "col-md-4" </ > div /div>
  <hr>
  {{/ /div> If you restart the server and head back to localhost:3000, you should now see the ratings populated as well: Conclusion Slash GraphQL makes it incredibly easy to set up a production-grade GraphQL API, but we've only scratched the surface. In addition to being able to combine disparate data locations, it also supports , , and even . authorization subscriptions encryption You can grab the complete source code for this tutorial . If you haven’t already, be sure to sign up for - feel free to share your creations with the rest of the . over at GitHub Slash GraphQL Dgraph community Also published at https://dev.to/mbogan/create-a-book-rating-system-with-the-goodreads-api-and-slash-graphql-5b78

Fetch

Instantly

Super

I write about technology michael.bogan@gmail.com

2022 - HackerNoon Contributor of the Year - Api

2022 - HackerNoon Contributor of the Year - Devops

2022 - HackerNoon Contributor of the Year - Microservices

2022 - HackerNoon Contributor of the Year - Software

2022 - HackerNoon Contributor of the Year - Software Architecture

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Software Architecture

Nominated for 2022 - HackerNoon Contributor of the Year - Microservices

Nominated for 2022 - HackerNoon Contributor of the Year - Devops

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Software

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

Book Rating System From Scratch using Goodreads API and Slash GraphQL

Book Rating System From Scratch using Goodreads API and Slash GraphQL

Too Long; Didn't Read

Companies Mentioned

@MichaelB

RELATED STORIES