In this video we'll see how to use SWR to fetch data, revalidate the data and stop refetching on focus.
We'll be using the following techniques in this tutorial:
- SWR and fetcher
- mutate
- stop SWR refreshing data on focus.
You can find the SWR code here: [ Ссылка ]
00:00 - Introduction
00:37 - Creating the foundation
02:15 - Adding SWR
03:20 - Creating a custom fetcher
04:27 - Built in data and error handling.
04:42 - Creating a loading and error screen.
05:27 - Using Map to create a list of users.
06:30 - Trying out data fetching.
07:00 - What is happening in the console
08:05 - Stop fetching on focus.
09:10 - Adding revalidateOnFocus
09:30 - Testing our new code.
09:48 - Adding a button to add data.
10:05 - Async onClick Handler
10:49 - Posting Data to our API
11:13 - Testing the POST
11:29 - No data refresh
11:55 - Adding Mutation
13:09 - Testing Mutation
14:15 - Outro
Full tech list:
- Next.js - [ Ссылка ]
- Chakra-UI - [ Ссылка ]
- React - [ Ссылка ]
- SWR : [ Ссылка ]
---
Follow me on:
📃 Website/Blog: [ Ссылка ]
👉 Twitter: [ Ссылка ]
👉 Linkedin: [ Ссылка ]
👉 Github: [ Ссылка ]
Data Fetch and revalidate with SWR
Теги
Data Fetch with SWRreact hooksssr data fetchingswr next jsdata fetching next jsdata fetching react hooksreactjs tutorial for beginners 2020react tutorial projectreact fetchreact tutorialweb development tutorialweb developmentnext js fetch data from apinext js for beginnersweb development 2020react hooks reduxData fetch iwth swrreactjs tutorialnextjs tutorial
