react query v4

mluukkai · mluukkai · commit b26480743e39 · 2023-08-23T14:15:49.000+03:00
diff --git a/src/content/6/en/part6.md b/src/content/6/en/part6.md
@@ -10,7 +10,9 @@ So far, we have placed the application's state and state logic directly inside R
 
 We'll learn about the lightweight version of Redux directly supported by React, namely the React context and useRedux hook, as well as the React Query library that simplifies the server state management.
 
-<i>Part updated 30th Jan 2023</i>
-- <i>A new section on React Query, useReducer and React context replaced the section on Redux connect</i>
+
+<i>Part updated 23rd August 2023</i>
+- <i>Create React App replaced with Vite</i>
+- <i>React Query updated to version 4</i>
 
 </div>
diff --git a/src/content/6/en/part6d.md b/src/content/6/en/part6d.md
@@ -50,20 +50,20 @@ The initial code is on GitHub in the repository [https://github.com/fullstack-hy
 
 ### Managing data on the server with the React Query library
 
-We shall now use the [React Query](https://react-query-v3.tanstack.com/) library to store and manage data retrieved from the server.
+We shall now use the [React Query](https://tanstack.com/query/latest) library to store and manage data retrieved from the server. The latest version of the library is also called TanStack Query, but we stick to the familiar name.
 
 Install the library with the command
 
 ```bash
-npm install react-query
+npm install @tanstack/react-query
 ```
 
-A few additions to the file  <i>index.js</i> are needed to pass the library functions to the entire application:
+A few additions to the file  <i>main.jsx</i> are needed to pass the library functions to the entire application:
 
 ```js
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { QueryClient, QueryClientProvider } from 'react-query' // highlight-line
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query' // highlight-line
 
 import App from './App'
 
@@ -79,19 +79,19 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 We can now retrieve the notes in the <i>App</i> component. The code expands as follows:
 
 ```js
-import { useQuery } from 'react-query'  // highlight-line
+import { useQuery } from '@tanstack/react-query'  // highlight-line
 import axios from 'axios'  // highlight-line
 
 const App = () => {
   // ...
 
    // highlight-start
-  const result = useQuery(
-    'notes',
-    () => axios.get('http://localhost:3001/notes').then(res => res.data)
-  )
+  const result = useQuery({
+    queryKey: ['notes'],
+    queryFn: () => axios.get('http://localhost:3001/notes').then(res => res.data)
+  })
 
-  console.log(result)
+  console.log(JSON.parse(JSON.stringify(result)))
   // highlight-end
 
   // highlight-start
@@ -142,7 +142,10 @@ import { getNotes } from './requests' // highlight-line
 const App = () => {
   // ...
 
-  const result = useQuery('notes', getNotes)  // highlight-line
+  const result = useQuery({
+    queryKey: ['notes'],
+    queryFn: () => getNotes // highlight-line
+  })
 
   // ...
 }
@@ -175,7 +178,7 @@ import { useQuery, useMutation } from 'react-query' // highlight-line
 import { getNotes, createNote } from './requests' // highlight-line
 
 const App = () => {
-  const newNoteMutation = useMutation(createNote) // highlight-line
+ const newNoteMutation = useMutation({ mutationFn: createNote }) // highlight-line
 
   const addNote = async (event) => {
     event.preventDefault()
@@ -192,7 +195,7 @@ const App = () => {
 To create a new note, a [mutation](https://tanstack.com/query/latest/docs/react/guides/mutations) is defined using the function [useMutation](https://tanstack.com/query/latest/docs/react/reference/useMutation):
 
 ```js
-const newNoteMutation = useMutation(createNote)
+const newNoteMutation = useMutation({ mutationFn: createNote })
 ```
 
 The parameter is the function we added to the file <i>requests.js</i>, which uses Axios to send a new note to the server.
@@ -218,7 +221,7 @@ const App = () => {
 
   const newNoteMutation = useMutation(createNote, {
     onSuccess: () => {  // highlight-line
-      queryClient.invalidateQueries('notes')  // highlight-line
+      queryClient.invalidateQueries({ queryKey: ['notes'] })  // highlight-line
     },
   })
 
@@ -252,7 +255,7 @@ const App = () => {
 
   const updateNoteMutation = useMutation(updateNote, {
     onSuccess: () => {
-      queryClient.invalidateQueries('notes')
+      queryClient.invalidateQueries({ queryKey: ['notes'] })
     },
   })
 
@@ -532,7 +535,7 @@ React's built-in [Context API](https://beta.reactjs.org/learn/passing-data-deepl
 
 Let us now create a context in the application that stores the state management of the counter.
 
-The context is created with React's hook [createContext](https://beta.reactjs.org/reference/react/createContext). Let's create a context in the file <i>CounterContext.js</i>:
+The context is created with React's hook [createContext](https://beta.reactjs.org/reference/react/createContext). Let's create a context in the file <i>CounterContext.jsx</i>:
 
 ```js
 import { createContext } from 'react'
@@ -594,7 +597,7 @@ The current code for the application is in [GitHub](https://github.com/fullstack
 
 ### Defining the counter context in a separate file
 
-Our application has an annoying feature, that the functionality of the counter state management is partly defined in the <i>App</i> component. Now let's move everything related to the counter to <i>CounterContext.js</i>:
+Our application has an annoying feature, that the functionality of the counter state management is partly defined in the <i>App</i> component. Now let's move everything related to the counter to <i>CounterContext.jsx</i>:
 
 ```js
 import { createContext, useReducer } from 'react'
@@ -629,7 +632,7 @@ export default CounterContext
 
 The file now exports, in addition to the <i>CounterContext</i> object corresponding to the context, the <i>CounterContextProvider</i> component, which is practically a context provider whose value is a counter and a dispatcher used for its state management.
 
-Let's enable the context provider by making a change in <i>index.js</i>:
+Let's enable the context provider by making a change in <i>main.jsx</i>:
 
 ```js
 import ReactDOM from 'react-dom/client'
diff --git a/src/content/6/fi/osa6.md b/src/content/6/fi/osa6.md
@@ -10,7 +10,8 @@ Olemme toistaiseksi sijoittaneet ohjelman tilan ja siitä huolehtivan logiikan s
 
 Tututustumme Reactin suoraan tukemaan Reduxin kevytversioon, eli Reactin kontekstiin ja useRedux-hookiin sekä palvelimen tilan hallintaa helpottavaan React Query ‑kirjastoon.
 
-<i>Osa päivitetty 1.2.2023</i>
-- <i>Uusi luku, aiheenaan React Query, useReducer ja React context korvasi Redux connect ‑luvun</i>
+<i>Osa päivitetty 23.8.2023</i>
+- <i>Create React App korvattu Vitellä</i>
+- <i>React Query päivitetty versioon 4</i>
 
 </div>
diff --git a/src/content/6/fi/osa6d.md b/src/content/6/fi/osa6d.md
@@ -50,18 +50,19 @@ Alkuvaiheen koodi on GitHubissa repositorion [https://github.com/fullstack-hy202
 
 ### Palvelimella olevan datan hallinta React Query ‑kirjaston avulla
 
-Hyödynnämme nyt [React Query](https://react-query-v3.tanstack.com/) ‑kirjastoa palvelimelta haettavan datan säilyttämiseen ja hallinnointiin. Asennetaan kirjasto komennolla
+Hyödynnämme nyt [React Query](https://tanstack.com/query/latest) ‑kirjastoa palvelimelta haettavan datan säilyttämiseen ja hallinnointiin. Kirjaston uusimmasta versiosta käytetään myös nimitystä TanStack Query mutta pitäydymme vanhassa tutussa nimessä.
+
+Asennetaan kirjasto komennolla
 
 ```bash
-npm install react-query
+npm install @tanstack/react-query
 ```
 
-Tiedostoon <i>index.js</i> tarvitaan muutama lisäys, jotta kirjaston funktiot saadaan välitettyä koko sovelluksen käyttöön:
+Tiedostoon <i>main.jsx</i> tarvitaan muutama lisäys, jotta kirjaston funktiot saadaan välitettyä koko sovelluksen käyttöön:
 
 ```js
-import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { QueryClient, QueryClientProvider } from 'react-query' // highlight-line
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query' // highlight-line
 
 import App from './App'
 
@@ -77,19 +78,19 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 Voimme nyt hakea muistiinpanot komponentissa <i>App</i>. Koodi laajenee seuraavasti:
 
 ```js
-import { useQuery } from 'react-query'  // highlight-line
+import { useQuery } from '@tanstack/react-query'  // highlight-line
 import axios from 'axios'  // highlight-line
 
 const App = () => {
   // ...
 
    // highlight-start
-  const result = useQuery(
-    'notes',
-    () => axios.get('http://localhost:3001/notes').then(res => res.data)
-  )
+  const result = useQuery({
+    queryKey: ['notes'],
+    queryFn: () => axios.get('http://localhost:3001/notes').then(res => res.data)
+  })
 
-  console.log(result)
+  console.log(JSON.parse(JSON.stringify(result)))
   // highlight-end
 
   // highlight-start
@@ -106,7 +107,7 @@ const App = () => {
 }
 ```
 
-Datan hakeminen palvelimelta tapahtuu edelleen tuttuun tapaan Axiosin <i>get</i>-metodilla. Axiosin metodikutsu on kuitenkin nyt kääritty [useQuery](https://react-query-v3.tanstack.com/reference/useQuery)-funktiolla muodostetuksi [kyselyksi](https://react-query-v3.tanstack.com/guides/queries). Funktiokutsun ensimmäisenä parametrina on merkkijono <i>notes</i> joka toimii [avaimena](https://react-query-v3.tanstack.com/guides/query-keys) määriteltyyn kyselyyn, eli muistiinpanojen listaan.
+Datan hakeminen palvelimelta tapahtuu edelleen tuttuun tapaan Axiosin <i>get</i>-metodilla. Axiosin metodikutsu on kuitenkin nyt kääritty [useQuery](https://tanstack.com/query/latest/docs/react/reference/useQuery)-funktiolla muodostetuksi [kyselyksi](https://tanstack.com/query/latest/docs/react/guides/queries). Funktiokutsun ensimmäisenä parametrina on merkkijono <i>notes</i> joka toimii [avaimena](https://tanstack.com/query/latest/docs/react/guides/query-keys) määriteltyyn kyselyyn, eli muistiinpanojen listaan.
 
 Funktion <i>useQuery</i> paluuarvo on olio, joka kertoo kyselyn tilan. Konsoliin tehty tulostus havainnollistaa tilannetta: 
 
@@ -140,7 +141,10 @@ import { getNotes } from './requests' // highlight-line
 const App = () => {
   // ...
 
-  const result = useQuery('notes', getNotes)  // highlight-line
+  const result = useQuery({
+    queryKey: ['notes'],
+    queryFn: () => getNotes // highlight-line
+  })
 
   // ...
 }
@@ -173,7 +177,7 @@ import { useQuery, useMutation } from 'react-query' // highlight-line
 import { getNotes, createNote } from './requests' // highlight-line
 
 const App = () => {
-  const newNoteMutation = useMutation(createNote) // highlight-line
+  const newNoteMutation = useMutation({ mutationFn: createNote }) // highlight-line
 
   const addNote = async (event) => {
     event.preventDefault()
@@ -187,10 +191,10 @@ const App = () => {
 }
 ```
 
-Uuden muistiinpanon luomista varten määritellään [mutaatio](https://react-query-v3.tanstack.com/guides/mutations) funktion [useMutation](https://react-query-v3.tanstack.com/reference/useMutation) avulla:
+Uuden muistiinpanon luomista varten määritellään [mutaatio](https://tanstack.com/query/latest/docs/react/guides/mutations) funktion [useMutation](https://tanstack.com/query/latest/docs/react/reference/useMutatio) avulla:
 
 ```js
-const newNoteMutation = useMutation(createNote)
+const newNoteMutation = useMutation({ mutationFn: createNote })
 ```
 
 Parametrina on tiedostoon <i>requests.js</i> lisäämämme funktio, joka lähettää Axiosin avulla uuden muistiinpanon palvelille.
@@ -204,7 +208,7 @@ newNoteMutation.mutate({ content, important: true })
 Ratkaisumme on hyvä. Paitsi se ei toimi. Uusi muistiinpano kyllä tallettuu palvelimelle, mutta se ei päivity näytölle. 
 
 Jotta saamme renderöityä myös uuden muistiinpanon, meidän on kerrottava React Querylle, että kyselyn, jonka avaimena on merkkijono <i>notes</i> vanha tulos tulee mitätöidä eli
-[invalidoida](https://react-query-v3.tanstack.com/guides/invalidations-from-mutations). 
+[invalidoida](https://tanstack.com/query/latest/docs/react/guides/invalidations-from-mutations). 
 
 Invalidointi on onneksi helppoa, se voidaan tehdä kytkemällä mutaatioon sopiva <i>onSuccess</i>-takaisinkutsufunktio:
 
@@ -217,7 +221,7 @@ const App = () => {
 
   const newNoteMutation = useMutation(createNote, {
     onSuccess: () => {  // highlight-line
-      queryClient.invalidateQueries('notes')  // highlight-line
+      queryClient.invalidateQueries({ queryKey: ['notes'] }) // highlight-line
     },
   })
 
@@ -251,7 +255,7 @@ const App = () => {
 
   const updateNoteMutation = useMutation(updateNote, {
     onSuccess: () => {
-      queryClient.invalidateQueries('notes')
+      queryClient.invalidateQueries({ queryKey: ['notes'] })
     },
   })
 
@@ -532,7 +536,7 @@ Reactin sisäänrakennettu [Context API](https://beta.reactjs.org/learn/passing-
 
 Luodaan sovellukseen nyt konteksti, joka tallettaa laskurin tilanhallinnan.
 
-Konteksti luodaan Reactin hookilla [createContext](https://beta.reactjs.org/reference/react/createContext). Luodaan konteksti tiedostoon <i>CounterContext.js</i>:
+Konteksti luodaan Reactin hookilla [createContext](https://beta.reactjs.org/reference/react/createContext). Luodaan konteksti tiedostoon <i>CounterContext.jsx</i>:
 
 ```js
 import { createContext } from 'react'
@@ -596,7 +600,7 @@ Sovelluksen tämänhetkinen koodi on GitHubissa repositorion [https://github.com
 
 ### Laskurikontekstin määrittely omassa tiedostossa
 
-Sovelluksessamme on vielä sellainen ikävä piirre, että laskurin tilanhallinnan toiminnallisuus on määritelty osin komponentissa <i>App</i>. Siirretään nyt kaikki laskuriin liittyvä tiedostoon <i>CounterContext.js</i>:
+Sovelluksessamme on vielä sellainen ikävä piirre, että laskurin tilanhallinnan toiminnallisuus on määritelty osin komponentissa <i>App</i>. Siirretään nyt kaikki laskuriin liittyvä tiedostoon <i>CounterContext.jsx</i>:
 
 ```js
 import { createContext, useReducer } from 'react'
@@ -631,7 +635,7 @@ export default CounterContext
 
 Tiedosto exporttaa nyt kontekstia vastaavan olion <i>CounterContext</i> lisäksi komponentin <i>CounterContextProvider</i> joka on käytännössä kontekstin tarjoaja (context provider), jonka arvona on laskuri ja sen tilanhallintaan käytettävä dispatcheri.
 
-Otetaan kontekstin tarjoaja käyttöön tiedostossa <i>index.js</i>
+Otetaan kontekstin tarjoaja käyttöön tiedostossa <i>main.jsx</i>
 
 ```js
 import ReactDOM from 'react-dom/client'
