Er zijn verschillende manieren om data op te halen
De stale-while-revalidate (SWR) methode
Het beheert eventuele problemen die kunnen optreden bij het verkrijgen van de gegevens en helpt je bij het beheren van de opslag ervan. SWR bevat useState() en useEffect(), dus het is niet nodig om deze apart te importeren.
Snellere laadtijd: Toont direct oudere data terwijl nieuwe gegevens worden opgehaald.
Minder serverbelasting: Vermindert het aantal verzoeken naar de server.
Offline ondersteuning: Toont eerder opgehaalde data, zelfs zonder verbinding.
Eenvoud: Vereenvoudigt het ophalen en beheren van data zonder complexe code.
Foutafhandeling: Kan automatisch omgaan met fouten tijdens het ophalen van data.
Aanpasbaar: Het gedrag van SWR kan worden aangepast aan de behoeften van je app.
Consistentie: Zorgt voor een uniforme aanpak voor het ophalen en opslaan van gegevens.
Gebruik:
In de terminal: npm i swr
In Swr.jsx:
import useSWR from 'swr'; // Import useSWR from swr package
const fetcher = (...args) => fetch(...args).then((res) => res.json()); // Created function to handle API request
const Swr = () => {
const {
data: countries,
error,
isValidating,
} = useSWR('https://restcountries.com/v2/all', fetcher); // Fetch data from API using SWR
export default Swr; // Export the component for use in App.jsx or Index.jsx
## De JavaScript `Fetch()` methode
- De fetch()-methode maakt het eenvoudig om informatie van het internet op te halen met JavaScript.
- Je kunt extra details naar de server sturen, zoals wie je bent of welke gegevens je wilt.
- Het werkt goed in de meeste moderne webbrowsers.
- Ondersteunt verschillende HTTP-methoden zoals get, post, put, en delete, wat flexibiliteit biedt bij API-interacties.
- Het is een native JavaScript-methode, dus geen externe bibliotheken of dependencies nodig.
- Dit maakt de methode lichtgewicht en efficiënt.
### Gebruik:
1. Fetch.jsx bestand creëren
2. In de Fetch.jsx file:
import { useState, useEffect } from 'react'; // Import useState and useEffect from React
const Fetch = () => {
const [photos, setPhotos] = useState([]); // Initialize photos state as an empty array
useEffect(() => {
// Fetch data when the component is mounted
fetch('https://jsonplaceholder.typicode.com/photos') // Send a request to the API
.then((res) => {
return res.json(); // Convert the response to JSON format
})
.then((data) => {
console.log(data); // Log the data to the console
setPhotos(data); // Update the photos state with the fetched data
});
}, []); // Empty dependency array ensures the effect runs only once on component mount
return (
{photos.map((photo) => (
))}
);
};
// Process the received photos by utilizing a map() function to iterate through each item.
export default Fetch; // Export the Fetch component
3. In het main bestand: **App.jsx of Index.jsx:**
import Fetch from './components/Fetch'
const App = ( ) => {
return (
)
}
export default App
(In src/components)
## React query
- React Query cachet de opgehaalde data, waardoor dezelfde gegevens opnieuw kunnen worden opgevraagd zonder een nieuw request te doen.
- Het kan data automatisch opnieuw fetchen wanneer bepaalde voorwaarden zijn voldaan, zoals het herwinnen van focus of na een bepaalde tijd.
- De UI wordt direct bijgewerkt met de verwachte uitkomst van een mutatie zonder serverbevestiging, wat zorgt voor een soepelere gebruikerservaring.
- Component-gebaseerde architectuur, wat zorgt voor eenvoudige integratie-
- DevTools is beschikbaar.
### Gebruik:
1. In de terminal: `npm i @tanstack/react-query`
2. In de Main.jsx component
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
Er zijn verschillende manieren om data op te halen
De stale-while-revalidate (SWR) methode
Het beheert eventuele problemen die kunnen optreden bij het verkrijgen van de gegevens en helpt je bij het beheren van de opslag ervan. SWR bevat
useState()enuseEffect(), dus het is niet nodig om deze apart te importeren.Gebruik:
npm i swrconst fetcher = (...args) => fetch(...args).then((res) => res.json()); // Created function to handle API request
const Swr = () => { const { data: countries, error, isValidating, } = useSWR('https://restcountries.com/v2/all', fetcher); // Fetch data from API using SWR
export default Swr; // Export the component for use in App.jsx or Index.jsx
import { useState, useEffect } from 'react'; // Import useState and useEffect from React
const Fetch = () => { const [photos, setPhotos] = useState([]); // Initialize photos state as an empty array
useEffect(() => { // Fetch data when the component is mounted fetch('https://jsonplaceholder.typicode.com/photos') // Send a request to the API .then((res) => { return res.json(); // Convert the response to JSON format }) .then((data) => { console.log(data); // Log the data to the console setPhotos(data); // Update the photos state with the fetched data }); }, []); // Empty dependency array ensures the effect runs only once on component mount
return (
); }; // Process the received photos by utilizing a map() function to iterate through each item.
export default Fetch; // Export the Fetch component
import Fetch from './components/Fetch'
const App = ( ) => { return (
}
export default App
import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById('root')).render(