Context definiëren

import {createContext} from 'react'

// Context moet altijd een defaultwaarde hebben. 
// Context kan eender welk soort data bevatten.
export const SomeContext = createContext(someDefaultValue)

Provider aanmaken

import {SomeContext} from 'someFile'
import {useState} from 'react'

const SomeComponent = () => {
    const [someValue, setSomeValue] = useState(someDefaultValue)

    return (
        // Een provider geeft een bepaalde waarde voor een context,
        // Providers kunnen genest worden, de dichtsbijzijnde provider
        // wordt gebruikt. Als er geen provider is, wordt de defaultValue
        // gebruikt.
        <SomeContext.Provider value={someValue}>
            {/* Kinderen die gebruik kunnen maken van de waarde in de provider. */}
            <SomeOtherComponent/>
        </SomeContext.Provider>
    )
}

Context consummeren

import {SomeContext} from 'someFile'
import {useContext} from 'react'

const SomeOtherComponent = () => {
    const someValue = useContext(SomeContext)

    return (
        <></>
    )
}

.env voorbeeld

VITE_SOME_API_KEY=..........
VITE_DATABASE_URL=..........

Axios

const client = axios.create({
    baseURL: 'BASIS URL WAARMEE ELK REQUEST BEGINT'
})

const fetchSomething = async (someParam) => {
    await new Promise((resolve) => setTimeout(() => resolve(), 500))
    return client.get(someURLToAppendToBaseURL, {
        params: {
            param1: value,
            param2: value
        }
    })
}

TanStack Query config

• Verwacht een context provider met een queryClient
  • Configuratie van de query, hoe lang cachen, wanneer refetchen, ...
  • Configuratie kan op query niveau overschreven worden
    • suspense: Gebruik suspense om een loading component te tonen terwijl data opgehaald wordt
    • useErrorBoundary: Standaard true met suspense, gebruik een component die runtime errors opvangt
    • refetchOnWindowFocus: Ververs data als het tabblad opnieuw focus krijgt

TanStack Query config

import {QueryClient, QueryClientProvider} from '@tanstack/react-query'

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            suspense: true, 
            useErrorBoundary: false,
            refetchOnWindowFocus: import.meta.env.PROD,
        }
    }
})

root.render(
    <QueryClientProvider client={queryClient}>
        <App/>
    </QueryClientProvider>
)

TanStack Query gebruiken

const someComponent = () => {
  const {data, isSuccess, isError, isFetching} = useQuery(
          ['some', 'unique', 'key'],
          async () => (await someAxiosFetchFunction()).data,
          {
            enabled: someBooleanIndicatingIfTheQueryShouldBeRun,
            stateTime: howLongBeforeTheQueryIsStaleInMs,
            cacheTime: howLongShowTheQueryResultBeCachedInMs,
            refetchInterfal: howOftenShouldTheQueryRefreshTheResults
          }
  )
  
  return <SomeComponentThatShowsTheData data={data}/>
}