Introduction to react-query
Published: 2023-03-22 21:10:14

---
title: Introduction to react-query
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0lr8t0dbawuerumpjgj.jpeg
series: react
---

> [you can find a video version of this article but it is only in italian](https://youtu.be/saOiP0fPF6o)

## install react

This hook can be used after installing a component called react-query.

To install, run:

```bash
npm install react-query
```

As usual, start with an empty React application. In the code below, we have only included the title of this paragraph.

src/App.js

```jsx
import './App.css';

function App() {
 return (
   <div className="App">
     <header className="App-header">
       <h1>react-query</h1>
     </header>
   </div >
 );
}
export default App;
```

## create new component

Now let's create the component we will call MyComponent.

```jsx
src/MyComponent.js
export default function MyComponent() {
return (
<div>
<h1>My Component data</h1>
<ul></ul>
</div>
)
}
```

## start using useQuery()

Now, thanks to react-query, we can use the useQuery hook. With this component, we can obtain references related to a call to an external API, the data that it returns, whether the page is loading, whether it has encountered an error, and the list of errors.

src/MyComponent.js

```jsx
import { useQuery } from "react-query"

export default function MyComponent() {
const { data, isLoading, isError, error } = useQuery('myData', () =>
fetch('http://localhost:8888')
.then(res => res.json())
);

if (isLoading) {
return <div>loading ...</div>
}

if (isError) {
return <div>Error: ... {error.message}</div>
}

return (
<div>
<h1>My Component data</h1>
<ul></ul>
</div>
)
}
```

## get data

Let's now determine what we want to show on the screen while our hook is waiting for a response from the server or when a response has been received, but an error has occurred.

src/MyComponent.js

```jsx
import { useQuery } from "react-query"

export default function MyComponent() {
const { data, isLoading, isError, error } = useQuery('myData', () =>
fetch('http://localhost:8888')
.then(res => res.json())
);

if (isLoading) {
return <div>loading ...</div>
}

if (isError) {
return <div>Error: ... {error.message}</div>
}

return (
<div>
<h1>My Component data</h1>
<ul></ul>
</div>
)
}
```

## display data

The last step is to display the obtained data once our hook has loaded the page.

src/MyComponent.js

```jsx
import { useQuery } from "react-query"

export default function MyComponent() {
const { data, isLoading, isError, error } = useQuery('myData', () =>
fetch('http://localhost:8888')
.then(res => res.json())
);

if (isLoading) {
return <div>loading ...</div>
}

if (isError) {
return <div>Error: ... {error.message}</div>
}

return (
<div>
<h1>My Component data</h1>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
)
}
```

## include component

Now let's return to the <App /> component. We can now include our component.

src/App.js

```jsx
import './App.css';
import MyComponent from './MyComponent';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient()

function App() {
 return (
   <div className="App">
     <header className="App-header">
       <h1>react-query</h1>
       <QueryClientProvider client={queryClient}>
         <MyComponent />
       </QueryClientProvider>
     </header>
   </div >
 );
}

export default App;
```

However, before doing so, unless we want to get a visible error in the browser console, we need to wrap all components that use useQuery in a <QueryClientProvider />. This <QueryClientProvider /> needs to receive a client as input. This client must be an instance of <QueryClient />.

## server

Finally we have to create the php server to run with `php -S localhost:8888 -t public`. First of all create the folder public and inside create the index.php file. The file s should contains something similar to:

```php
<?php

Header('Access-Control-Allow-Origin: *');
Header('Content-type: application/json');

echo json_encode([
    [
        'id' => 987,
        'name' => 'Simone',
    ],
    [
        'id' => 657,
        'name' => 'Lorenzo',
    ],
]);
```

So, .. run php server (or write your own with node or other tool) and the run also your react application.

Enjoy