Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Query a GraphQL API with graphql-request

    Alex BanksAlex Banks
    apolloApollo
    graphqlGraphQL

    Created by the team at Prisma, graphql-request is a lightweight package that can be used to send queries to any GraphQL API. Sending a request with graphql-request uses less syntax than a fetch request. In this lesson, we will query the totalDays field using this helper package.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:01 I'm going to install a package called graphql-request. graphql-request provides an alternative to using the fetch method. Next, we're going to import the request function from the graphql-request package. I'll add a little log that notifies the user that we're sending the query.

    00:23 This request method is a wrapper around the fetch method. It will handle sending the options and parsing the response data. All we need to do is send an endpoint and a query, and we will get our data directly back in the response.

    00:36 I can destructure total days from data, and use that to construct my string. We'll log all of our results to the console, and we'll also catch any errors that occur and log them to the console as well. Now, we can open up the terminal, and start our client. We see the results right here in the console.

    00:59 There's our total days count, at 100. If we open up the network tab of our developer tools, we can actually see the HTTP request. This second localhost request is our HTTP request, so we can see the post request to our GraphQL service, and we can also see the data that has been returned.

    01:16 There's our total days. We are still sending an HTTP request, but instead of using Fetch to send the request, we've simplified the code quite a bit by using the request method from graphql-request.

    Discuss

    Discuss