part 8 vite

Author: mluukkai

src/content/0/en/part0a.md

@@ -340,7 +340,7 @@ Despite changes <i>all the submitted exercises remain valid</i>, and the course
 
 Recent major changes
 
-- Parts 1-7 (11th-26th August): Create React app replaced with Vite
+- Parts 1-8 (11th-25th September): Create React app replaced with Vite
 
 ### Expanding on a previously completed course
 

src/content/0/fi/osa0a.md

@@ -282,7 +282,7 @@ Kurssilla ei ole enää vuosittaisia versiota. Kurssi on siis käynnissä koko a
 Muutoksista huolimatta <i>kaikki jo tehdyt palautukset säilyvät voimassa</i>, eli voit jatkaa kurssia päivityksistä huolimatta normaaliin tapaan.
 
 Viimeaikaisia isompia muutoksia
-- Osat 1-7 (11-26.8.2023): Create React app korvattu Vitellä
+- Osat 1-8 (11-24.9.2023): Create React app korvattu Vitellä
 
 ### Aiemmin suoritetun kurssin täydentäminen
 

src/content/8/en/part8.md

@@ -8,7 +8,7 @@ lang: en
 
 This part of the course is about GraphQL, Facebook's alternative to REST for communication between browser and server.
 
-<i>Part updated 5th Feb 2023</i>
-- <i>Backend updated to use Apollo Server 4.0</i>
+<i>Part updated 43rd September 2023</i>
+- <i>Create React App replaced with Vite</i>
 
 </div>

src/content/8/en/part8b.md

@@ -7,7 +7,7 @@ lang: en
 
 <div class="content">
 
-We will next implement a React app which uses the GraphQL server we created.
+We will next implement a React app that uses the GraphQL server we created.
 
 The current code of the server can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-backend/tree/part8-3), branch <i>part8-3</i>.
 
@@ -23,7 +23,7 @@ At the moment, there are two good options: [Relay](https://facebook.github.io/re
 
 ### Apollo client
 
-Let us create a new React-app, and can continue installing dependencies required by [Apollo client](https://www.apollographql.com/docs/react/get-started/).
+Let us create a new React app, and can continue installing dependencies required by [Apollo client](https://www.apollographql.com/docs/react/get-started/).
 
 ```bash
 npm install @apollo/client graphql
@@ -152,7 +152,7 @@ if (result.loading) {
 }
 ```
 
-When a response is received, the result of the <i>allPersons</i> query can be found from the <i>data</i> field, and we can render the list of names to the screen.
+When a response is received, the result of the <i>allPersons</i> query can be found in the data</i> field, and we can render the list of names to the screen.
 
 ```js
 <div>
@@ -331,7 +331,7 @@ const result = useQuery(FIND_PERSON, {
 })
 ```
 
-When user is not interested in seeing the detailed info of any person, the state variable <i>nameToSearch</i> is null and the query is not executed.
+When the user is not interested in seeing the detailed info of any person, the state variable <i>nameToSearch</i> is null and the query is not executed.
 
 If the state <i>nameToSearch</i> has a value and the query result is ready, the component <i>Person</i> renders the detailed info of a person:
 
@@ -346,11 +346,11 @@ if (nameToSearch && result.data) {
 }
 ```
 
-A single person view looks like this:
+A single-person view looks like this:
 
-![browser showing single person](../../images/8/11.png)
+![browser showing single-person](../../images/8/11.png)
 
-When a user wants to return to the persons list, the *nameToSearch* state is set to *null*.
+When a user wants to return to the person list, the *nameToSearch* state is set to *null*.
 
 The current code of the application can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-1) branch <i>part8-1</i>.
 
@@ -461,7 +461,6 @@ const PersonForm = () => {
 export default PersonForm
 ```
 
-<!-- Lomakkeen koodi on suoraviivainen, mielenkiintoiset rivit on korostettu. Mutaation suorittava funktio saadaan luotua _useMutation_-hookin avulla. Hook palauttaa kyselyfunktion <i>taulukon</i> ensimmäisenä alkiona: -->
 The code of the form is straightforward and the interesting lines have been highlighted.
 We can define mutation functions using the *useMutation* hook.
 The hook returns an <i>array</i>, the first element of which contains the function to cause the mutation.
@@ -470,7 +469,6 @@ The hook returns an <i>array</i>, the first element of which contains the functi
 const [ createPerson ] = useMutation(CREATE_PERSON)
 ```
 
-<!-- Kyselyä tehtäessä määritellään kyselyn muuttujille arvot: -->
 The query variables receive values when the query is made:
 
 ```js
@@ -532,7 +530,7 @@ const PersonForm = (props) => {
   })
 ```
 
-The pros and cons of this solution are almost opposite of the previous one's. There is no extra web traffic, because queries are not done just in case.  However, if one user now updates the state of the server, the changes do not show to other users immediately.
+The pros and cons of this solution are almost opposite of the previous one. There is no extra web traffic because queries are not done just in case.  However, if one user now updates the state of the server, the changes do not show to other users immediately.
 
 If you want to do multiple queries, you can pass multiple objects inside refetchQueries. This will allow you to update different parts of your app at the same time. Here is an example:
 
@@ -589,7 +587,7 @@ Trying to create a person with invalid data causes an error:
 
 We should handle the exception. We can register an error handler function to the mutation using the *useMutation* hook's *onError* [option](https://www.apollographql.com/docs/react/api/react/hooks/#params-2).
 
-Let's register the mutation with an error handler which uses the *setError*
+Let's register the mutation with an error handler that uses the _setError_*
 function it receives as a parameter to set an error message:
 
 ```js
@@ -600,7 +598,7 @@ const PersonForm = ({ setError }) => {
     refetchQueries: [  {query: ALL_PERSONS } ],
     // highlight-start
     onError: (error) => {
-      const messages = error.graphQLErrors[0].message
+      const messages = error.graphQLErrors.map(e => e.message).join('\n')
       setError(messages)
     }
     // highlight-end
@@ -610,8 +608,6 @@ const PersonForm = ({ setError }) => {
 }
 ```
 
-We have to dig quite deep to the error object until we find the proper error messages...
-
 We can then render the error message on the screen as necessary:
 
 ```js
@@ -784,36 +780,6 @@ If a person cannot be found, or the *result.data.editNumber* is *null*, the comp
 We want to set the error message only when the result of the mutation
 *result.data* changes, so we use the useEffect hook to control setting the error message.
 
-Using useEffect causes an ESLint warning:
-
-![vscode useEffect has a missing dependency setError](../../images/8/41x.png)
-
-The warning is pointless, and the easiest solution is to ignore the ESLint rule on the line:
-
-```js
-useEffect(() => {
-  if (result.data && !result.data.editNumber) {
-    setError('name not found')
-  }
-// highlight-start  
-}, [result.data])  // eslint-disable-line 
-// highlight-end
-```
-
-We could try to get rid of the warning by adding the *setError* function to useEffect's second parameter array:
-
-```js
-useEffect(() => {
-  if (result.data && !result.data.editNumber) {
-    setError('name not found')
-  }
-// highlight-start  
-}, [result.data, setError])
-// highlight-end
-```
-
-However, this solution does not work if the *notify* function is not wrapped to a [useCallback](https://react.dev/reference/react/useCallback) function.  If it's not, this results in an endless loop. When the *App* component is rerendered after a notification is removed, a <i>new version</i> of *notify* gets created which causes the effect function to be executed, which causes a new notification, and so on, and so on...
-
 The current code of the application can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-4) branch <i>part8-4</i>.
 
 ### Apollo Client and the applications state

src/content/8/en/part8d.md

@@ -75,7 +75,7 @@ const LoginForm = ({ setError, setToken }) => {
       setToken(token)
       localStorage.setItem('phonenumbers-user-token', token)
     }
-  }, [result.data]) // eslint-disable-line
+  }, [result.data])
 // highlight-end
 
   const submit = async (event) => {
@@ -218,8 +218,6 @@ const PersonForm = ({ setError }) => {
 }
 ```
 
-Current application code can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-6), branch <i>part8-6</i>.
-
 ### Updating cache, revisited
 
 We have to [update](/en/part8/react_and_graph_ql#updating-the-cache) the cache of the Apollo client on creating new persons. We can update it using the mutation's *refetchQueries* option to define that the
@@ -232,8 +230,7 @@ const PersonForm = ({ setError }) => {
   const [ createPerson ] = useMutation(CREATE_PERSON, {
     refetchQueries: [  {query: ALL_PERSONS} ], // highlight-line
     onError: (error) => {
-      const errors = error.graphQLErrors[0].extensions.error.errors
-      const messages = Object.values(errors).map(e => e.message).join('\n')
+      const messages = error.graphQLErrors.map(e => e.message).join('\n')
       setError(messages)
     }
   })
@@ -249,7 +246,8 @@ const PersonForm = ({ setError }) => {
 
   const [ createPerson ] = useMutation(CREATE_PERSON, {
     onError: (error) => {
-      setError(error.graphQLErrors[0].message)
+      const messages = error.graphQLErrors.map(e => e.message).join('\n')
+      setError(messages)
     },
     // highlight-start
     update: (cache, response) => {
@@ -269,17 +267,17 @@ const PersonForm = ({ setError }) => {
 The callback function is given a reference to the cache and the data returned by the mutation as parameters. For example, in our case, this would be the created person.
 
 Using the function [updateQuery](https://www.apollographql.com/docs/react/caching/cache-interaction/#using-updatequery-and-updatefragment) the code updates the
-query <em>ALL\_PERSONS</em> in cache by adding the new person to the cached data.
+query ALLPERSONS in the cache by adding the new person to the cached data.
 
 In some situations, the only sensible way to keep the cache up to date is using the *update* callback.
 
 When necessary, it is possible to disable cache for the whole application or [single queries](https://www.apollographql.com/docs/react/api/react/hooks/#options) by setting the field managing the use of cache, [fetchPolicy](https://www.apollographql.com/docs/react/data/queries/#configuring-fetch-logic) as <em>no-cache</em>.
 
-Be diligent with the cache. Old data in cache can cause hard-to-find bugs. As we know, keeping the cache up to date is very challenging. According to a coder proverb:
+Be diligent with the cache. Old data in the cache can cause hard-to-find bugs. As we know, keeping the cache up to date is very challenging. According to a coder proverb:
 
 > <i>There are only two hard things in Computer Science: cache invalidation and naming things.</i> Read more [here](https://martinfowler.com/bliki/TwoHardThings.html).
 
-The current code of the application can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-7), branch <i>part8-7</i>.
+The current code of the application can be found on [Github](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-5), branch <i>part8-5</i>.
 
 </div>
 

src/content/8/en/part8e.md

@@ -629,9 +629,9 @@ It's possible to test the subscriptions with the Apollo Explorer like this:
 
 ![apollo explorer showing subscriptions tab and response](../../images/8/31x.png)
 
-When the blue button <i>PersonAdded</i> is pressed, Explorer starts to wait for a new person to be added. On addition (that you need to do from another browser window), the info of the added person appears in the right side of the Explorer.
+When the blue button <i>PersonAdded</i> is pressed, Explorer starts to wait for a new person to be added. On addition (that you need to do from another browser window), the info of the added person appears on the right side of the Explorer.
 
-If the subscription does not work, check that you have correct connection settings:
+If the subscription does not work, check that you have the correct connection settings:
 
 ![apollo studio showing cog red arrow highlighting](../../images/8/35.png)
 
@@ -642,7 +642,7 @@ Implementing subscriptions involves a lot of configurations. You will be able to
 ### Subscriptions on the client
 
 In order to use subscriptions in our React application, we have to do some changes, especially to its [configuration](https://www.apollographql.com/docs/react/data/subscriptions/).
-The configuration in <i>index.js</i> has to be modified like so:
+The configuration in <i>main.jsx</i> has to be modified like so:
 
 ```js
 import { 
@@ -852,7 +852,7 @@ const PersonForm = ({ setError }) => {
 } 
 ```
 
-The final code of the client can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-9), branch <i>part8-9</i>.
+The final code of the client can be found on [GitHub](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-6), branch <i>part8-6</i>.
 
 ### n+1 problem
 

src/content/8/fi/osa8.md

@@ -10,7 +10,7 @@ Kurssin uudessa osassa käsitellään GraphQL:ää, eli Facebookin kehittämää
 
 Katso <a target="_BLANK" href='https://www.youtube.com/watch?v=R7bXa7g6YuQ&list=PLumQiZ25uijis31zaRL7rhzLalSwLqUtm&index=4&t=0s'>täältä</a> Houston Inc:n Niko Salmisen GraphQL:ää käsittelevä vierailuluento.
 
-<i>Osa päivitetty 5.2.2023</i>
-- <i>Backend muutettu käyttämään Apollo Server -kirjaston versiota 4.0</i>
+<i>Osa päivitetty 24.9.2023</i>
+- <i>Create React App korvattu Vitellä</i>
 
 </div>

src/content/8/fi/osa8b.md

@@ -577,8 +577,7 @@ const PersonForm = ({ setError }) => {
     refetchQueries: [  {query: ALL_PERSONS } ],
     // highlight-start
     onError: (error) => {
-      const errors = error.graphQLErrors[0].extensions.error.errors
-      const messages = Object.values(errors).map(e => e.message).join('\n')
+      const messages = error.graphQLErrors.map(e => e.message).join('\n')
       setError(messages)
     }
     // highlight-end
@@ -588,8 +587,6 @@ const PersonForm = ({ setError }) => {
 }
 ```
 
-Joudumme kaivautumaan syvälle olion <i>error</i> sisälle, ennen kuin oikea virheilmoitus löytyy...
-
 Renderöidään mahdollinen virheilmoitus näytölle
 
 ```js
@@ -756,36 +753,6 @@ const PhoneForm = ({ setError }) => {
 
 Jos henkilöä ei löytynyt, eli kyselyn tulos _result.data.editNumber_ on _null_, asettaa komponentti propseina saamansa callback-funktion avulla sopivan virheilmoituksen. Virheilmoituksen asettamista kontrolloidaan useEffect-hookin avulla, eli virheviesti halutaan asettaa ainoastaan jos mutaation tulos _result.data_ muuttuu.
 
-useEffect aiheuttaa ESLint-virheilmoituksen:
-
-![](../../images/8/41x.png)
-
-Varoitus on aiheeton, ja pääsemme helpoimmalla ignoroimalla ESLint-säännön riviltä:
-
-```js
-useEffect(() => {
-  if ( result.data && !result.data.editNumber) {
-    setError('name not found')
-  }
-// highlight-start  
-}, [result.data])  // eslint-disable-line 
-// highlight-end
-```
-
-Voisimme yrittää päästä varoituksesta eroon lisäämällä funktion _setError_ useEffectin toisena parametrina olevaan taulukkoon:
-
-```js
-useEffect(() => {
-  if ( result.data && !result.data.editNumber) {
-    setError('name not found')
-  }
-// highlight-start  
-}, [result.data, setError])
-// highlight-end
-```
-
-Tämä ratkaisu ei kuitenkaan toimi, ellei _setError_-funktiota ole määritelty [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)-funktioon käärittynä. Jos näin ei tehdä, seurauksena on ikuinen luuppi, sillä aina kun komponentti _App_ renderöidään uudelleen notifikaation poistamisen jälkeen, syntyy <i>uusi versio</i> funktiosta _setError_ ja se taas aiheuttaa efektifunktion uudelleensuorituksen ja taas uuden notifikaation...
-
 Sovelluksen tämänhetkinen koodi on [GitHubissa](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-4), branchissa <i>part8-4</i>.
 
 ### Apollo Client ja sovelluksen tila

src/content/8/fi/osa8d.md

@@ -74,7 +74,7 @@ const LoginForm = ({ setError, setToken }) => {
       setToken(token)
       localStorage.setItem('phonenumbers-user-token', token)
     }
-  }, [result.data]) // eslint-disable-line
+  }, [result.data])
 // highlight-end
 
   const submit = async (event) => {
@@ -218,8 +218,6 @@ const PersonForm = ({ setError }) => {
 }
 ```
 
-Sovelluksen tämän vaiheen koodi [GitHubissa](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-6), branchissa <i>part8-6</i>.
-
 ### Välimuistin päivitys revisited
 
 Uusien henkilöiden lisäyksen yhteydessä on siis 
@@ -232,8 +230,7 @@ const PersonForm = ({ setError }) => {
   const [ createPerson ] = useMutation(CREATE_PERSON, {
     refetchQueries: [  {query: ALL_PERSONS} ], // highlight-line
     onError: (error) => {
-      const errors = error.graphQLErrors[0].extensions.error.errors
-      const messages = Object.values(errors).map(e => e.message).join('\n')
+      const messages = error.graphQLErrors.map(e => e.message).join('\n')
       setError(messages)
     }
   })
@@ -250,7 +247,8 @@ const PersonForm = ({ setError }) => {
 
   const [ createPerson ] = useMutation(CREATE_PERSON, {
     onError: (error) => {
-      setError(error.graphQLErrors[0].message)
+      const messages = error.graphQLErrors.map(e => e.message).join('\n')
+      setError(messages)
     },
     // highlight-start
     update: (cache, response) => {
@@ -280,7 +278,7 @@ Välimuistin kanssa kannattaa olla tarkkana. Välimuistissa oleva epäajantasain
 > <i>There are only two hard things in Computer Science: cache invalidation and naming things.</i> Katso lisää [täältä](https://www.google.com/search?q=two+hard+things+in+Computer+Science&oq=two+hard+things+in+Computer+Science).
 
 
-Sovelluksen tämän vaiheen koodi [GitHubissa](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-7), branchissa <i>part8-7</i>.
+Sovelluksen tämän vaiheen koodi [GitHubissa](https://github.com/fullstack-hy2020/graphql-phonebook-frontend/tree/part8-5), branchissa <i>part8-5</i>.
 
 </div>