Introduction to react-query

you can find a video version of this article but it is only in italian

install react

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

To install, run:

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

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.

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

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

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

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 component. We can now include our component.

src/App.js

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 . This needs to receive a client as input. This client must be an instance of .

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

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