“”
Consuming GraphQL endpoint using React

Lambda & DynamoDB

  View more techs   

Consuming GraphQL endpoint using React

Updated February 13, 2020

Guillermo Osores

Guillermo Osores

 

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:


npm install apollo-boost @apollo/react-hooks react-apollo graphql


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:


import ApolloClient from "apollo-boost"; const client = new ApolloClient({ // here goes your lambda function uri uri: 'https://host/dev/graphql', });


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


import { ApolloProvider } from '@apollo/react-hooks'; function App() { const [id, setId] = useState(1); const onChange = evt => { const value = evt.target.value; if (isNaN(Number.parseInt(value))) return setId(null); setId(Number.parseInt(value)); };
return (
<div className="App">
<ApolloProvider client={client}>
<h1>React Apollo</h1>
user id: <input onChange={onChange} value={id} />
{!!id && <UserContainer id={id} />}
</ApolloProvider>
</div>
);
}


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.


import React from 'react'; import { gql } from "apollo-boost"; import { Query } from "react-apollo"; import UserComponent from './UserComponent'; const query = gql` query ($id: Int) { getUserInfo (id: $id) { first_name last_name email } } `; const userContainer = ({ id }) => {({ loading, error, data }) => { if (error) return <div>something went wrong</div>;
if (loading) return <div>loading, please wait</div>;
if (!data.getUserInfo) return <div>user not found</div>
return <UserComponent user={data.getUserInfo} />;
})
</Query>;
export default userContainer;


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



import React from 'react'; const UserComponent = ({ user: { first_name, last_name, email } }) => { return (
<div style={{ margin: '10px' }}>
<div>name: {first_name}</div>
<div>last name: {last_name}</div>
<div>email: {email}</div>
</div>
);
}
export default UserComponent;

Contact us

Ready to get started? Use the form below or give us a call to meet our team and discuss your project and business goals.
We can’t wait to meet you!


Follow Us
See our client reviews