Begrip: useSuspenseQuery

De useSuspenseQuery hook wordt gebruikt om data op te halen van een externe bron. Wat deze bron is, speelt geen rol. Dit kan, afhankelijk van het platform (web, desktop, mobile), een API, een filesystem operatie, een sqlite query of nog iets anders zijn.

De hook is zeer uitgebreid en complex, we beperken ons in deze tekst tot de basisfunctionaliteiten. Voor meer details verwijzen we door naar de documentatie.

Deze useSuspenseQuery hook heeft 2 vaste parameters en één optionele:

1. Een array waarvan de elementen samen de key van de query vormen. Deze key moet uniek zijn, als 2 queries dezelfde key krijgen, worden ze als gelijk beschouwd en wordt eventueel gecachete data gebruikt.

2. Een functie die data ophaalt.

3. Optionele configuratie, de lijst van mogelijke opties is te groot om hier te bespreken, we verwijzen door naar de documentatie

De useSuspenseQuery hook geeft een groot object terug, we verwijzen opnieuw naar de documentatie voor de volledige lijst. We gebruiken in deze les enkel de data property.

import {FunctionComponent} from 'react'
import {useSuspenseQuery} from '@tanstack/react-query'

const SomeComponent: FunctionComponent = () => {
   const {data} = useSuspenseQuery({
      queryKey: ['some', 'unique', 'query', 'key'],
      queryFn: someAsynchronousFetchingFunction,
      // Optional extra configuration
   })
   
   return <>{/* Some JSX that uses the fetched data. */}</>
}