Consuming GraphQL endpoint using React

 Reynaldo Rodríguez
Reynaldo Rodríguez
February 13, 2020
React
Apollo
GraphQL
Integration
Consuming GraphQL endpoint using React

In today’s article we are going to see how easy it is to use React-Apollo to consume the GraphQL endpoint we created in our previous article using AWS Lambda functions.

Let’s dive right into it.

First of all, we need to install Apollo libraries from NPM:



We need to tell Apollo where our endpoint is located. To do so we create a new Apollo client passing a configuration object in which we can set our uri:


Then we need to use ApolloProvider and set its client using the previously created one so all our components can access our GraphQL backend:


As you can see our app consists of an input which expect to be the id of the user you want to query. We use the useState hook to update our component based on its changes.

Using the render props pattern we created a UserContainer and a UserComponent.

The User container will be responsible for querying our backend with the id it receives from our app. In this case we use the Query component from React-Apollo library and set our render prop function. This function will be called with an object containing lots of properties: in our example we only used loading, error and data. The names are pretty much mnemotechnic: loading will be true while fetching data; error will not be null if something wrong happened; and data will have the information you were trying to get.

So inside the data property object there will be a property named as your query (in our case it is getUserInfo) which will be the response.


We send our data from our container to our component so we can handle the information on screen:


Next.js Latest features

Explore Next.js's latest features in versions 13 and 14: App Router, Server Components, Streaming, and Server Actions. These updates revolutionize routing, rendering, content delivery, and server-side logic, enhancing performance and user experience.

February 7, 2024
Read more ->
Nodejs
React
Software Development

What’s New in React 19? A Developer’s Guide to Next-Gen Features

Explore React 19's innovative features like Actions, Server Components, and improved hooks. Learn how this version redefines performance, SEO, and web development.

January 8, 2025
Read more ->
React

Get in Touch

Let's Discuss Your IT Augmentation Needs

Have questions or are interested in our IT Staff Augmentation services? We'd love to hear from you. Reach out to our team using the contact information below, and we'll be in touch shortly to discuss how we can support your projects.

Find Us!

One Beacon St, 15th Floor, Boston, MA 02108

What do you need help with?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
"They're very collaborative, and they offer great benefits to us. The interaction is very important to us, and they take time to explain their process. They excel in all aspects of what we do, and I would recommend them to anybody."
Jonathan Wride
CEO at