DEV Community

Cover image for Introduction to react-query
Simone Gentili
Simone Gentili

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
)
}
Enter fullscreen mode Exit fullscreen mode

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>
)
}
Enter fullscreen mode Exit fullscreen mode

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>
)
}
Enter fullscreen mode Exit fullscreen mode

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>
)
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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',
    ],
]);
Enter fullscreen mode Exit fullscreen mode

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

Enjoy

Top comments (0)