To follow this lesson, we need a starter app. We have two options here:

### 🌎 CodeSandbox

Click [this link](https://codesandbox.io/s/github/arunoda/swr-demo/tree/codesandbox) to access the version of this starter app inside Codesandbox. If you haven't used Codesandbox before, [check this video](https://youtu.be/AEYneE8kDgQ).

### 💻 Git Clone Locally

You can clone this repository locally. For that use these commands:

```
git clone https://github.com/arunoda/swr-demo.git
cd swr-demo
```

Then install dependencies and run it.

```
yarn
yarn dev
```

----

Now try to access the app and add a few todo items. Then reload the page.

<Question
    id="swr::1::1"
    title="How do you describe the result?"
    answers={[
        "There is no UI to add todo items",
        "After the reload, it removed all the todo items created by me",
        "After the reload, it removed all the todo items",
        "It throws an error saying: Not Implemented yet!"
    ]}
    points={20}
    correctAnswer={1}
    explain={
        Yes. You can add todo items. But they are stored in an array inside the `components/Todos.js` file. When you reload it, it removed all the todo items created by you.
    }
/>





Setting Up

This starter app comes with a couple of Next.js API routes that manage our todo items. Here are those APIs:

* `GET /api/todos` list all todo items
* `POST /api/todo` Add a todo item

Now we are going to fetch todo items and render them on the screen.

First of all, let's install SWR:

```
yarn add swr
```

<Note>If you are using Codesandbox, this is already installed for you.</Note>

Then replace the content of `components/Todos.js` with the following content:

```
import { useState } from 'react'
import useSWR from 'swr'
import TodoList from './TodoList'

async function jsonFetcher(path) {
  const res = await fetch(path)
  return res.json()
}

export default function Todos() {
  const {data} = useSWR('/api/todos', jsonFetcher)
  const [listKey, setListKey] = useState(Math.random())
   
  if (!data) {
    return 'loading...'
  }

  const addTodo = async (todoName) => {
    throw new Error('Not implemeted yet!')
  }

  return (
    <TodoList key={listKey} data={data} onNewTodo={addTodo}/>
  )
}
```

Make your attention to the following line:

```
const {data} = useSWR('/api/todos', jsonFetcher)
```

The first argument is the **key**. SWR uses it for caching and keeps track of the data. Also, the key will be passed to the `jsonFetcher` function. So, this fetcher function can use the key to fetch related data.

Now try to access the app and add a few todo items. Then reload the page.

<Question
    id="swr::2::1"
    title="How do you describe the result?"
    answers={[
        "There is no UI to add todo items",
        "After the reload, it removed all the todo items created by me",
        "After the reload, it removed all the todo items",
        "It throws an error saying: Not Implemented yet!"
    ]}
    points={30}
    correctAnswer={3}
    explain={
        Yes. It will throw an error. But that's expected since we have not added that functionality yet!
    }
/>


Okay. Here's another question for you.

<DefineVar name="swr::2::2::code">
~~~
async function graphQLFetcher(query) {
  const fetchRes = await fetch(`${API_URL}/graphql`, {
    method: 'POST',
    headers: {
     'Content-Type': 'application/json'
    },
    body: JSON.stringify({
     query,
     variables: {}
    })
   })
   
   if (!fetchRes.ok) {
    throw new Error(`Error fetching query: ${query}, error: ${await fetchRes.text()}`)
   }
   
   const payload = await fetchRes.json()
   if (payload.errors) {
    throw new Error(`GraphQL Error: ${payload.errors[0].message}`)
   }
   
   return payload.data
}

const {data} = useSWR(`
  {
    todos {
      id
      name
    }
  }
`, graphQLFetcher)
~~~
</DefineVar>

<Question
    id="swr::2::2"
    title="How do you query a GraphQL endpoint?"
    answers={[
        "You cannot do that",
        "Use the GraphQL query in the cache key",
        "Use the query as the cache key and use a GraphQL fetcher",
        "Import SWR from `swr/graphql` and use a query as the key"
    ]}
    points={40}
    correctAnswer={2}
    explain={
        With SWR, you can use any kind of API endpoint or data fetching library. SWR will take care of the data management part. Here's how we can query a GraphQL endpoint with SWR.

        <UseVar name="swr::2::2::code" />
    }
/>

Fetching Data

Now it's time to add a todo item. We are working on the `components/Todos.js` file.

First import `mutate` from SWR like this:

```
import useSWR, {mutate} from 'swr'
```

Then replace the `addTodo` function with the following:

```
const addTodo = async (todoName) => {
    const addRes = await fetch('/api/todo', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify({name: todoName})
    })

    if (!addRes.ok) {
        const {error} = await addRes.json()
        throw new Error(error.message);
    }

    await mutate('/api/todos')

    setListKey(Math.random())
}
```

_(Here's the [modified version](https://github.com/arunoda/swr-demo/blob/add-item/components/Todos.js) of the `components/Todos.js` file.)_

In this code, we make an HTTP POST request to add a todo item. Then we call the following mutate function.

```
await mutate('/api/todos')
```

In this case, what mutate does is pretty simple. It will refetch data related to the cache key(`api/todos`) and re-render the UI.

**Okay, now it's time for a question:**

Now try to add a couple of todo items.
<br/>
(_You can reset items on the todo list by modifying any file in this app._)

<Question
    id="swr::3::1"
    title="How do you describe your experience?"
    answers={[
        "It was adding todo items right away",
        "It threw an error",
        "It blocked the UI in the first time and It will stay like that until a reload",
        "It blocked the UI for about a second after clicking the \"Add\" button"
    ]}
    points={40}
    correctAnswer={3}
    explain={
        This one-second delay is the time, server spends to add the todo. We can add a loading indicator very easily. But it'll be nice if we can add the item without blocking the UI.

        Here's a better version of this:

        ![](https://user-images.githubusercontent.com/50838/87213573-98159d80-c343-11ea-998c-d28bf1c598c0.gif)

        This UI pattern is known as the **Optimistic UI**.
    }
/>





Add a Todo Item

Now we are going to add the optimistic UI support. 

For that replace the `addToDo` function in the `components/Todos.js` with the following content:

```
const addTodo = async (todoName) => {
    // Add fake item and re-render the UI
    const fakeItem = {
        id: Math.random(),
        name: todoName,
        clientOnly: true
    }
    mutate('/api/todos', [...data, fakeItem], false)
    setListKey(Math.random())

    // Add the todo Item
    const addRes = await fetch('/api/todo', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify({name: todoName})
    })

    if (!addRes.ok) {
        const {error} = await addRes.json()
        throw new Error(error.message);
    }

    // Refetch the list
    mutate('/api/todos')
}
```

_(Here's the [modified version](https://github.com/arunoda/swr-demo/blob/optimistic-ui-support/components/Todos.js) of the `components/Todos.js` file.)_

In this version, we do three main things:

1. First, we push a fake item to the cache, and it will render the UI
2. Then we invoke the API, which adds the todo item.
3. Finally, we will call `mutate('api/todos')` to invalidate the cache and fetch data again

Now, let's have a look at the first mutate function:

~~~js
const fakeItem = {
    id: Math.random(),
    name: todoName,
    clientOnly: true
}

mutate('/api/todos', [...data, fakeItem], false)
~~~

* With the second argument, we replace the existing cache for the key `api/todos`
* With the third argument as `false`, we ask SWR to stop invalidating and fetch data


We also have this `clientOnly: true` flag in the fake todo item, which we can use to identify the fake item from the real. Then when we can add a different CSS style to this fake item. You can inspect the `components/TodoList.js` on how we are doing it.

**Okay, now it's time for a question:**

Try to add a bunch of todo items quickly. You can do that by typing something and pressing the Enter key.
<br/>
(Do not add empty items as it will throw an error)

<Question
    id="swr::4::1"
    title="How do you describe your experience?"
    answers={[
        "Optimistic UI works great",
        "It will throw some error after the first time",
        "It works great for the first item, then it blocks the UI",
        "It works great for the first item, then the UI feels unstable"
    ]}
    points={40}
    correctAnswer={3}
    explain={
        For the first item or two, the optimistic UI works fine. Then the UI looks unstable, like this:

        ![](https://user-images.githubusercontent.com/50838/87214751-09a61980-c34d-11ea-97fc-d9bbb9ee5ce3.gif)
    }
/>


Add Optimistic UI support

Now we are going to fix that unstable UI issue. For that, replace the last `mutate()` call in the `addTodo` function with the following:

```
// get the newly add to do
const newTodo = await addRes.json();

// replace above with the fake todo item
mutate('/api/todos', (existingData) => {
    const newData = []
    for (const item of existingData) {
        if (item.id === fakeItem.id) {
            newData.push(newTodo)
            continue
        }
        newData.push(item)
    }
    
    return newData
}, false)
```

_(Here's the [modified version](https://github.com/arunoda/swr-demo/blob/fix-optimistic-ui-issues/components/Todos.js) of the `components/Todos.js` file.)_

Here's what we are doing in this code:

* Fetch the newly added todo item
* Replace it with the fake item in the cache
* Here we don't re-fetch data with the last mutate call

---

Now we are using a callback function to replace data. Previously, we directly pass a data array like this:

```
mutate('/api/todos', [...data, fakeItem], false)
```

<DefineVar name="swr::5::1::mutate">
~~~
mutate('/api/todos', (existingData) => {
    const modifiedData = []
    return modifiedData
}, false)
~~~
</DefineVar>

<Question
    id="swr::5::1"
    title="What's the reason for that?"
    answers={[
        "If we directly pass a data array, it might miss some newly added fake todo items",
        "It will throw an error if we directly pass the data array",
        "This version performs better",
        "It does the same thing, but with a different API"
    ]}
    points={45}
    correctAnswer={0}
    explain={
        This `addTodo`, is an async function. The following `data` array contains the values only available in the time of calling this function.

        ~~~
        const {data} = useSWR('/api/todos', jsonFetcher)
        ~~~

        The it might not contain all the fake todo items, especially when we are adding items quickly. To get these newly added todo items, we can use the data callback function.

        <UseVar name="swr::5::1::mutate" />

        In the first mutate call inside the `addToItem` function, we pass the array directly. It worked without issues. That's because we execute the async API call after that mutate function call.
    }
/>





Fixing Optimistic UI issues

So far, we haven't look at error handling at all. Now it's time to take care of it.

<Question
    id="swr::6::1"
    title="Try to create an empty todo item. What's your experience?"
    answers={[
        "It created a new todo without any error",
        "It shows an error message next to the input box",
        "It shows an error message with Next.js's default error window",
        "It logs the error in the console, but no change in the UI"
    ]}
    points={20}
    correctAnswer={2}
    explain={
        As you have seen, we have not handled the error.
        <br/>
        This is what we are aiming for:

        ![](https://user-images.githubusercontent.com/50838/87274971-b671c980-c4fa-11ea-9e5c-5efb32f8f5e9.gif)
    }
/>

Here we are trying to capture errors thrown in the server. So, we have to run our API call inside a try-catch block. 

Here's how the `addTodo` function looks like with that. Apply these changes:

```
const addTodo = async (todoName) => {
    // Add fake item and re-render the UI
    const fakeItem = {
        id: Math.random(),
        name: todoName,
        clientOnly: true
    }
    mutate('/api/todos', [...data, fakeItem], false)
    setListKey(Math.random())

    try {
        // Add the todo Item
        const addRes = await fetch('/api/todo', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({name: todoName})
        })

        if (!addRes.ok) {
            const {error} = await addRes.json()
            throw new Error(error.message);
        }

        // get the newly add to do
        const newTodo = await addRes.json();

        // replace above with the fake todo item
        mutate('/api/todos', (existingData) => {
            const newData = []
            for (const item of existingData) {
                if (item.id === fakeItem.id) {
                    newData.push(newTodo)
                    continue
                }
                newData.push(item)
            }
            
            return newData
        }, false)
    } catch(err) {
        // add the error message
        mutate('/api/todos', (existingData) => {
            const newData = []
            for (const item of existingData) {
                if (item.id === fakeItem.id) {
                    newData.push({
                        id: fakeItem.id,
                        errorMessage: err.message
                    })
                    continue
                }
                newData.push(item)
            }
            
            return newData
        }, false)
    }
}
```

_(Here's the [modified version](https://github.com/arunoda/swr-demo/blob/error-handling/components/Todos.js) of the `components/Todos.js` file.)_

Have your attention to the `catch` block. In this case, we add the `errorMessage` field to the fake todo item. Then the `components/TodoList.js` can render it correctly.

```
mutate('/api/todos', (existingData) => {
    const newData = []
    for (const item of existingData) {
        if (item.id === fakeItem.id) {
            newData.push({
                id: fakeItem.id,
                errorMessage: err.message
            })
            continue
        }
        newData.push(item)
    }
    
    return newData
}, false)
```

Now let's do the same experiment as before:

<Question
    id="swr::6::2"
    title="Try to create an empty todo item. What's your experience?"
    answers={[
        "It created a new todo without any error",
        "It shows an error message inside the todo item",
        "It shows an error message with Next.js's default error window",
        "It logs the error in the console, but no change in the UI"
    ]}
    points={20}
    correctAnswer={1}
    explain={
        Yes. Now it looks great.
    }
/>


Here we have only handle errors when adding a todo item. That's something happening outside of SWR. But there could be errors when fetching data as well. You can check the error field when you invoke `useSWR` and change your UI accordingly.

```
const {data, error} = useSWR('/api/todos', jsonFetcher)
```

Error Handling

Now you have a good understanding of SWR and how to use it properly. Now you can go through the [documentation](https://swr.vercel.app) and explore for more.

Here are some few challenges for you:

* Use a real data source for your Todos (Firebase, Google Sheets, AirTable)
* Add delete todo functionality
* Use a GraphQL data source

Don't forget to share those with Twitter and mention this tutorial.

<Note>
I'm working on a course where we discuss similar topics like these. Have a look at [Bulletproof Next](https://getstarted.sh/bulletproof-next).
</Note>

Finally

Learn how to fetch data and manage them in a React app with SWR.