From 334bc73261e64680583ac505331ce24d1c5c8b37 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Thu, 15 Sep 2022 00:56:40 +0900 Subject: [PATCH 01/16] add the v2 blog page --- pages/blog/meta.en-US.json | 1 + pages/blog/swr-v2.en-US.mdx | 61 +++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 pages/blog/swr-v2.en-US.mdx diff --git a/pages/blog/meta.en-US.json b/pages/blog/meta.en-US.json index e86c2ad6..1f25fff2 100644 --- a/pages/blog/meta.en-US.json +++ b/pages/blog/meta.en-US.json @@ -1,3 +1,4 @@ { + "swr-v2": "Announcing SWR 2.0", "swr-v1": "Announcing SWR 1.0" } diff --git a/pages/blog/swr-v2.en-US.mdx b/pages/blog/swr-v2.en-US.mdx new file mode 100644 index 00000000..b7ec5257 --- /dev/null +++ b/pages/blog/swr-v2.en-US.mdx @@ -0,0 +1,61 @@ +--- +image: +description: 'Almost 2 years ago we open sourced SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR.' +date: +--- + +import Callout from 'nextra-theme-docs/callout' +import Bleed from 'nextra-theme-docs/bleed' + +import Authors, { Author } from 'components/authors' + +# Announcing SWR 2.0 + + + + +Almost a year ago we released SWR v1.0, today we are reaching another milestone: the 2.0 version of SWR! + +## What’s New + +### Better React 18 Support + +### isLoading State + +### keepPreviousData Option + +### useSWRMutation + +### Mutate Multiple Keys + +### Preload API + +### Functional optimisticData + +### Function as SWRConfig value + +### DevTools + +## Migration Guide + +### Fetcher no longer accepts multiple arguments + +### Avoid Using Suspense On The Server-Side + +### Internal Structure Of The Cached Data + +### SWRConfig.default → SWRConfig.defaultValue + +### Type InfiniteFetcher is renamed to SWRInfiniteFetcher + +### Changelog + +Read the full Changelog [on GitHub](https://github.com/vercel/swr/releases). + +## What’s Next + +If you have any feedback about this release, please [let us know](https://github.com/vercel/swr/discussions). + +## Thank You! + +We also want to thank the entire community, our [142 contributors](https://github.com/vercel/swr/graphs/contributors) (+ [106 docs contributors](https://github.com/vercel/swr-site/graphs/contributors)), and everyone who helped and gave us feedback! From 4864c51957a4f329fbf8baec9221601a8e409116 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Thu, 15 Sep 2022 01:10:09 +0900 Subject: [PATCH 02/16] update the description --- pages/blog/swr-v2.en-US.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/blog/swr-v2.en-US.mdx b/pages/blog/swr-v2.en-US.mdx index b7ec5257..70565d45 100644 --- a/pages/blog/swr-v2.en-US.mdx +++ b/pages/blog/swr-v2.en-US.mdx @@ -1,6 +1,6 @@ --- image: -description: 'Almost 2 years ago we open sourced SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR.' +description: 'Almost a year ago we released SWR v1.0, today we are reaching another milestone: the 2.0 version of SWR!' date: --- From 4fd396d372746087c07455f93c6d8974966e8f52 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Thu, 15 Sep 2022 23:48:10 +0900 Subject: [PATCH 03/16] add the migration guide section --- pages/blog/swr-v2.en-US.mdx | 46 ++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/pages/blog/swr-v2.en-US.mdx b/pages/blog/swr-v2.en-US.mdx index 70565d45..fbc95fc2 100644 --- a/pages/blog/swr-v2.en-US.mdx +++ b/pages/blog/swr-v2.en-US.mdx @@ -40,14 +40,58 @@ Almost a year ago we released SWR v1.0, today we are reaching another milestone: ### Fetcher no longer accepts multiple arguments -### Avoid Using Suspense On The Server-Side +`key` is now passed as a single argument. + +```diff +- useSWR([1, 2, 3], (a, b, c) => { ++ useSWR([1, 2, 3], ([a, b, c]) => { + assert(a === 1) + assert(b === 2) + assert(c === 3) +}) +``` ### Internal Structure Of The Cached Data +The internal structure of the cache data will be an object that holds all the current states. + +```diff +- assert(cache.get(key) === data) ++ assert(cache.get(key) === { data, error, isValidating }) + +// getter +- cache.get(key) ++ cache.get(key)?.data + +// setter +- cache.set(key, data) ++ cache.set(key, { ...cache.get(key), data }) +``` + + + You should not write to the cache directly, it might cause undefined behavior. + + ### SWRConfig.default → SWRConfig.defaultValue +`SWRConfig.defaultValue` is the property for accessing the default value. + +```diff +- SWRConfig.default ++ SWRConfig.defaultValue +``` + ### Type InfiniteFetcher is renamed to SWRInfiniteFetcher +```diff +- import { InfiniteFetcher } from 'swr/infinite' ++ import { SWRInfiniteFetcher } from 'swr/infinite' +``` + +### Avoid Using Suspense On The Server-Side + +When using `suspense: true` with SWR on the server-side (including pre-rendering in Next.js), it's now required to provide the initial data via [`fallbackData` or `fallback`](/docs/with-nextjs#pre-rendering-with-default-data). This means that you can't use Suspense to fetch data on the server side as of today, but either doing fully client-side data fetching, or fetch the data via the framework (such as getStaticProps in Next.js). + ### Changelog Read the full Changelog [on GitHub](https://github.com/vercel/swr/releases). From 7a4d95511d11e54a55453d14eeacf0f62618f873 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Fri, 16 Sep 2022 00:50:18 +0900 Subject: [PATCH 04/16] write more section for what's new --- pages/blog/swr-v2.en-US.mdx | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/pages/blog/swr-v2.en-US.mdx b/pages/blog/swr-v2.en-US.mdx index fbc95fc2..fe5b21bd 100644 --- a/pages/blog/swr-v2.en-US.mdx +++ b/pages/blog/swr-v2.en-US.mdx @@ -30,12 +30,46 @@ Almost a year ago we released SWR v1.0, today we are reaching another milestone: ### Preload API +`preload` is a new API for prefetching data programmatically. Prefetching data is important to improve user experiences and avoid waterfall problems. You can call `preload` before rendering. More information can be found [here](/docs/prefetching). + +```jsx +import useSWR, { preload } from 'swr' + +const fetcher = (url) => fetch(url).then((res) => res.json()) +// You can call the preload function in anywhere +preload('/api/user', fetcher) +``` + ### Functional optimisticData +`optimisticData` is an option of mutation, which is useful to implement optimistic UI. In v2, you can pass a function as the `optimisticData` option, which accepts current data and returns the new client cache data. More information can be found [here](/docs/mutation#optimistic-updates). + +```jsx +mutate('/api/user', updateUserName(newName), { + optimisticData: user => ({ ...data, name: newName }), + rollbackOnError: true +}); +``` + ### Function as SWRConfig value +The value prop of `SWRConfig` accepts a function that receives the parent config and returns a new config. More information can be found [here](/docs/global-configuration). + +```jsx + ({ + dedupingInterval: parent.dedupingInterval * 5, + refreshInterval: 100, + })} +> + + +``` + ### DevTools +SWRDevTools is a browser extension for SWR, which helps to debug your SWR cache and the results of your fetcher. More information can be found [here](/docs/advanced/devtools). + ## Migration Guide ### Fetcher no longer accepts multiple arguments From d19c599d828dd971d408b246d660e4fd87ab0030 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sat, 17 Sep 2022 00:39:52 +0900 Subject: [PATCH 05/16] write changes of highlights --- pages/blog/swr-v2.en-US.mdx | 100 ++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) diff --git a/pages/blog/swr-v2.en-US.mdx b/pages/blog/swr-v2.en-US.mdx index fe5b21bd..e9fe8e87 100644 --- a/pages/blog/swr-v2.en-US.mdx +++ b/pages/blog/swr-v2.en-US.mdx @@ -20,14 +20,114 @@ Almost a year ago we released SWR v1.0, today we are reaching another milestone: ### Better React 18 Support +SWR now uses `useSyncExternalStore` and `startTransition` internally to improve React 18 support, which ensures stronger UI consistency in concurrent rendering with React 18. The change is an internal implementation detail, so developers using SWR do not have to care about the change. + ### isLoading State +`isLoading` is a new return value that indicates if there's an ongoing request and no "loaded data". Previously, you have to check `data` and `error` are `undefined`, but now you can use the `isLoading` value. + +```jsx +function Stock() { + const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, { + refreshInterval: 3000 + }); + + // If it's still loading the initial data, there is nothing to display. + // We return a skeleton here. + if (isLoading) return
; + + // Otherwise, display the data and a spinner that indicates a background + // revalidation. + return ( + <> +
AAPL ${data}
+ {isValidating ?
: null} + + ); +} +``` + +We have added the new [Understanding SWR](/docs/advanced/understanding) page to describe how SWR returns values. + + ### keepPreviousData Option +`keepPreviousData` is a new option for keeping the previous fetched data. This improves the UX a lot when you fetch data based on continuous user actions, e.g. real-time search when typing. More information can be found [here](/docs/advanced/understanding#return-previous-data-for-better-ux). + +```jsx +function Search() { + const [search, setSearch] = React.useState(''); + + const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, { + keepPreviousData: true + }); + + return ( +
+ setSearch(e.target.value)} + placeholder="Search..." + /> + +
+ {data?.products.map(item => ) +
+
+ ); +} +``` + ### useSWRMutation +`useSWRMutation` is a new hook for remote mutations. This covers all the use cases of: + +- Requests that change data on the remote side: such as POST, PUT, DELETE, etc. +- Requests that need to be triggered manually, instead of automatically by SWR. +- Passing extra argument to fetcher, when triggering a request. +- Knowing the status of a mutation, similar to `isValidating` but for mutations. +- A lot more... + + +```jsx +import useSWRMutation from 'swr/mutation' + +async function sendRequest(url, { arg }) { + return fetch(url, { + method: 'POST', + body: JSON.stringify(arg) + }) +} + +function App() { + const { trigger } = useSWRMutation('/api/user', sendRequest) + + return +} +``` + +More information can be found [here](/docs/mutation#useswrmutation). + ### Mutate Multiple Keys +`mutate` accepts a filter function, which accepts key as the argument and returns which keys to revalidate. The filter function is applied to all the existing cache keys. You can now clear all cache data with `mutate`. More information can be found [here](/docs/mutation#mutate-multiple-items). + +```jsx +import { mutate } from 'swr' +// Or from the hook if you customized the cache provider: +// { mutate } = useSWRConfig() + +mutate( + key => typeof key === 'string' && key.startsWith('/api/item?id='), + undefined, + { revalidate: true } +) +``` + + ### Preload API `preload` is a new API for prefetching data programmatically. Prefetching data is important to improve user experiences and avoid waterfall problems. You can call `preload` before rendering. More information can be found [here](/docs/prefetching). From cb689a17b04b516a183b41c99639055f67fa07ce Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sun, 18 Sep 2022 00:54:49 +0900 Subject: [PATCH 06/16] add demo videos in the v2 blog and links to the CodeSandbox --- pages/blog/swr-v2.en-US.mdx | 19 +++++++++++++++++-- pages/docs/advanced/understanding.en-US.mdx | 4 +++- pages/docs/advanced/understanding.es-ES.mdx | 4 +++- pages/docs/advanced/understanding.ja.mdx | 4 +++- pages/docs/advanced/understanding.ko.mdx | 4 +++- pages/docs/advanced/understanding.pt-BR.mdx | 4 +++- pages/docs/advanced/understanding.ru.mdx | 4 +++- pages/docs/advanced/understanding.zh-CN.mdx | 4 +++- 8 files changed, 38 insertions(+), 9 deletions(-) diff --git a/pages/blog/swr-v2.en-US.mdx b/pages/blog/swr-v2.en-US.mdx index e9fe8e87..2eabb6ba 100644 --- a/pages/blog/swr-v2.en-US.mdx +++ b/pages/blog/swr-v2.en-US.mdx @@ -8,13 +8,14 @@ import Callout from 'nextra-theme-docs/callout' import Bleed from 'nextra-theme-docs/bleed' import Authors, { Author } from 'components/authors' +import Video from 'components/video' # Announcing SWR 2.0 -Almost a year ago we released SWR v1.0, today we are reaching another milestone: the 2.0 version of SWR! +We are excited to introduce SWR v2.0, including features to improve the use experience of your application. ## What’s New @@ -47,7 +48,13 @@ function Stock() { } ``` -We have added the new [Understanding SWR](/docs/advanced/understanding) page to describe how SWR returns values. +![An example using the isLoading state](https://user-images.githubusercontent.com/3676859/163695538-9ed6232d-808c-4c83-8606-0dd22bce508d.gif) + +You can find the full code for this example here: https://codesandbox.io/s/swr-isloading-v8dfpy. + + + We have added the new [Understanding SWR](/docs/advanced/understanding) page to describe how SWR returns values. + ### keepPreviousData Option @@ -79,6 +86,14 @@ function Search() { } ``` +