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
Oldest comments (0)