refactor v5 tanstack query links

Author: flexbox

challenges/data/02.md

@@ -30,17 +30,25 @@ Here's how it works:
 ```javascript
 // DO NOT MONKEY COPY/PASTE ME
 
+/**
+ * Fetches data from an API endpoint and returns the JSON response.
+ * @returns {Promise<Object>} A promise that resolves to the JSON response from the API.
+ */
 async function getDataFromApi() {
-  const result = await fetch(`https://api.example.com/collection/`);
-  const json = await result.json();
-  return json;
+  try {
+    const response = await fetch(`https://api.example.com/collection/`);
+    const json = await response.json();
+    return json;
+  } catch (error) {
+    throw new Error("Something bad happened with the api…");
+  }
 }
 
-function Component({ itemId }) {
-  const { isLoading, isError, data } = useQuery(
-    ["dataFromApi"],
-    getDataFromApi
-  );
+/**
+ * Renders a component that fetches data from an API and displays it.
+ */
+function Component() {
+  const { isLoading, isError, data } = useQuery(["dataFromApi"], getDataFromApi);
 
   if (isLoading) {
     return <Text>Loading…</Text>;
@@ -69,50 +77,65 @@ npm install @tanstack/react-query
 
 - [ ] Add a `QueryClientProvider` and wrap the application entry point.
 
-**🔭 Hint:** You can have a look at the [`QueryClientProvider` documentation](https://tanstack.com/query/v4/docs/reference/QueryClientProvider)
+**🔭 Hint:** You can have a look at the [`QueryClientProvider` documentation](https://tanstack.com/query/latest/docs/framework/react/reference/QueryClientProvider#queryclientprovider)
 
 ### Fetching resources across the network
 
-- [ ] Take 5 min to **read carefully** the [`useQuery` documentation](https://tanstack.com/query/v4/docs/guides/queries).
-
-In the example `useQuery`, `isLoading` and `isError` lives on the same files.
-
-To have a more robust application, and separte the concerns of the data and the ui, we can wrap our queries into one custom hook `useStarships()`.
+- [ ] Take 5 min to **read carefully** the [`useQuery` documentation](https://tanstack.com/query/latest/docs/framework/react/guides/queries).
 
 The logic is:
 
 1. `fetch` data from the endpoint and return the result as a `json`
 1. Get the result from the fetch and return the result of `useQuery`
-1. Use our custom hook to render the UI
+1. render the UI
+
+Using the `useQuery` hook and `fetchStarshipsData`, fetch data from the Star Wars API:
+
+```javascript
+async function fetchStarshipsData() {
+  try {
+    const response = await fetch(`https://swapi.py4e.com/api/starships/`);
+    const json = await response.json();
+    return json;
+  } catch (error) {
+    throw new Error("Something bad happened with the api…");
+  }
+}
+```
+
+- [ ] Use the hook to **dislay a loading message**.
+- [ ] Use the hook to **handle errors**.
+- [ ] Use the hook to replace `data.json` and **render data** with a `FlatList`.
+
+## 👽 Bonus
+
+In the previous challenge `useQuery`, `isPending` and `isError` lives on the same files. To have a more robust application, and separte the concerns of the data and the ui, we can wrap our queries into one custom hook `useStarships()`.
 
 - [ ] Create a new file `useStarships.ts` and paste the content bellow
 
 ```javascript
 // ./src/hooks/useStarships.ts
 import { useQuery } from "@tanstack/react-query";
 
-async function fetchData() {
-  const result = await fetch(`https://swapi.py4e.com/api/starships/`);
-  const json = await result.json();
-  return json;
+async function fetchStarshipsData() {
+  try {
+    const response = await fetch(`https://swapi.py4e.com/api/starships/`);
+    const json = await response.json();
+    return json;
+  } catch (error) {
+    throw new Error("Something bad happened with the api…");
+  }
 }
 
 export function useStarships() {
-  return useQuery({ queryKey: ["starships"], queryFn: fetchData} );
+  return useQuery({ queryKey: ["starships"], queryFn: fetchStarshipsData} );
 }
 ```
 
 Now you can write `useStarships()` anywhere in your Screen and React Query handles the rest.
 
-- [ ] Go to your Feed screen and remplace the `data.json` with data from the swapi.
-- [ ] Use `useStarships` hook to **dislay a loading message**.
-- [ ] Use `useStarships` hook to **handle errors**.
-- [ ] Use `useStarships` hook to **render data** with a `FlatList`.
-
 If you want to display some images on your `Card`, you can use this placeholder `https://picsum.photos/400/200` as a `source`.
 
-## 👽 Bonus
-
 - [ ] Save this talk to your "Watch later" playlist: [Custom Hooks in React: The Ultimate UI Abstraction Layer](https://www.youtube.com/watch?v=J-g9ZJha8FE) from Tanner Linsley
 - [ ] Display a nice animated placeholder during loading with [rn-placeholder](https://github.com/mfrachet/rn-placeholder)
 - [ ] Add a "Pull to Refresh" functionality to your FlatList with `onRefresh`