Data fetching libraries

Data fetching libraries

• React Query
  • https://tanstack.com/query/latest/docs/react/overview
• RTK Query
  • https://redux-toolkit.js.org/rtk-query/overview
• Apollo Client
  • https://www.apollographql.com/docs/react/

Vi ska titta på React Query

Varför React Query?

• Effektiv hämtning av komponentdata
• Caching
• Optimistiska uppdateringar
• Automatisk hantering av fel

React Query, delar

• QueryClient
  • Hanterar cachning och hämtning av data
• QueryClientProvider
  • Tillhandahåller en QueryClient till komponenter
• useQuery
  • Hook för att hämta data
• useMutation
  • Hook för att skicka data till ett API

React Query, installation

npm install react-query

Sätta upp provider

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Exempel, useQuery

import { useQuery } from 'react-query';

const { isLoading, error, data } = useQuery('products', () =>
  fetch('https://fakestoreapi.com/products').then(res =>
    res.json()
  )
)

Exempel, useMutation

import { useMutation } from 'react-query';

const { mutate, isLoading, error, data } = useMutation(
  (newProduct) => fetch('https://fakestoreapi.com/products', {
    method: 'POST',
    body: JSON.stringify(newProduct),
  }).then(res => res.json())
)

Optimistiska uppdateringar

• När man t.ex. gör en POST-request eller PUT-request till ett API
• Innebär att man kan uppdatera UI:et direkt
• Kräver inte att man fått ett svar från API:et

Demo React Query

https://tanstack.com/query/latest/docs/react/quick-start