From f488e2e35793fbe9ffdb86374ecb00a9589463cf Mon Sep 17 00:00:00 2001 From: Yixuan Xu Date: Sun, 11 Dec 2022 19:53:16 +0800 Subject: [PATCH] fix: staticImage should only set blur placeholder for jpeg,png,webp,avif (#1058) * should only use blur placeholder when file type is jpeg,png,webp,avif * should only use blur placeholder when file type is jpeg,png,webp,avif * update changesets * update test snapshots * chore: add comments about VALID_BLUR_EXT for staticImage * chore: add jpg * prettify * update changeset description Co-authored-by: Dimitri POSTOLOV --- .changeset/forty-snakes-clean.md | 9 ++ .../pages/docs/understanding.en-US.mdx | 125 +++++++++++++++++ .../pages/docs/understanding.es-ES.mdx | 125 +++++++++++++++++ .../swr-site/pages/docs/understanding.ja.mdx | 125 +++++++++++++++++ .../swr-site/pages/docs/understanding.ko.mdx | 125 +++++++++++++++++ .../pages/docs/understanding.pt-BR.mdx | 125 +++++++++++++++++ .../swr-site/pages/docs/understanding.ru.mdx | 125 +++++++++++++++++ .../pages/docs/understanding.zh-CN.mdx | 125 +++++++++++++++++ .../public/img/understanding/fallback.svg | 16 +++ .../understanding/fetch-and-revalidate.svg | 16 +++ .../public/img/understanding/isloading.gif | Bin 0 -> 376423 bytes .../img/understanding/key-change-fallback.svg | 16 +++ .../key-change-previous-data-fallback.svg | 16 +++ .../key-change-previous-data.svg | 16 +++ .../public/img/understanding/key-change.svg | 16 +++ .../__snapshots__/context.test.ts.snap | 126 ++++++++++++++++++ .../__snapshots__/page-map.test.ts.snap | 14 ++ .../nextra/src/mdx-plugins/static-image.ts | 10 +- 18 files changed, 1128 insertions(+), 2 deletions(-) create mode 100644 .changeset/forty-snakes-clean.md create mode 100644 examples/swr-site/pages/docs/understanding.en-US.mdx create mode 100644 examples/swr-site/pages/docs/understanding.es-ES.mdx create mode 100644 examples/swr-site/pages/docs/understanding.ja.mdx create mode 100644 examples/swr-site/pages/docs/understanding.ko.mdx create mode 100644 examples/swr-site/pages/docs/understanding.pt-BR.mdx create mode 100644 examples/swr-site/pages/docs/understanding.ru.mdx create mode 100644 examples/swr-site/pages/docs/understanding.zh-CN.mdx create mode 100644 examples/swr-site/public/img/understanding/fallback.svg create mode 100644 examples/swr-site/public/img/understanding/fetch-and-revalidate.svg create mode 100644 examples/swr-site/public/img/understanding/isloading.gif create mode 100644 examples/swr-site/public/img/understanding/key-change-fallback.svg create mode 100644 examples/swr-site/public/img/understanding/key-change-previous-data-fallback.svg create mode 100644 examples/swr-site/public/img/understanding/key-change-previous-data.svg create mode 100644 examples/swr-site/public/img/understanding/key-change.svg diff --git a/.changeset/forty-snakes-clean.md b/.changeset/forty-snakes-clean.md new file mode 100644 index 0000000000..fef383a44f --- /dev/null +++ b/.changeset/forty-snakes-clean.md @@ -0,0 +1,9 @@ +--- +'nextra': patch +'nextra-theme-blog': patch +'nextra-theme-docs': patch +--- + +remove @react/skip-nev #1051 + +fix: staticImage should only set blur placeholder for jpeg,png,webp,avif diff --git a/examples/swr-site/pages/docs/understanding.en-US.mdx b/examples/swr-site/pages/docs/understanding.en-US.mdx new file mode 100644 index 0000000000..8ab801aa12 --- /dev/null +++ b/examples/swr-site/pages/docs/understanding.en-US.mdx @@ -0,0 +1,125 @@ +import { Callout } from 'nextra-theme-docs' +import Video from 'components/video' + +# Understanding SWR + +## State Machine + +`useSWR` returns `data`, `error`, `isLoading`, and `isValidating` depending on the state of the `fetcher` function. This diagrams describe how SWR returns values in some scenarios. + +### Fetch and Revalidate + +This pattern is to fetch data and revalidate it later. + +![A pattern for fetch and revalidate](/img/understanding/fetch-and-revalidate.svg) + +### Key Change + +This pattern is to fetch data and change the key and revalidate it later. + +![A pattern for key change](/img/understanding/key-change.svg) + +### Key Change + Previous Data + +This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option. + +![A pattern for key change + previous data](/img/understanding/key-change-previous-data.svg) + +### Fallback + +This pattern is to fetch data and revalidate it later with fallback data. + +![A pattern for fallback](/img/understanding/fallback.svg) + +### Key Change + Fallback + +This pattern is to fetch data and change the key and revalidate it later with fallback data. + +![A pattern for key change + fallback](/img/understanding/key-change-fallback.svg) + +### Key Change + Previous Data + Fallback + +This pattern is to fetch data and change the key and revalidate it later with the `keepPreviousData` option and fallback data. + +![A pattern for key change + previous data + fallback](/img/understanding/key-change-previous-data-fallback.svg) + +## Combining with isLoading and isValidating for better UX + +Comparing to the existing `isValidating` value, `isLoading` is a new property that can help you for the more general loading cases for UX. + +- `isValidating` becomes `true` whenever there is an ongoing request **whatever the the data is loaded or not** +- `isLoading` becomes `true` when there is an ongoing request and **data is not loaded yet**. + +Simply saying you can use `isValidating` for indicating everytime there is an ongoing revalidation, and `isLoading` for indicating that SWR is revalidating but there is no data yet to display. + + + Fallback data and previous data are not considered "loaded data," so when you use fallback data or enable the keepPreviousData option, you might have data to display. + + +```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 ( + <> +
${data}
+ {isValidating ?
: null} + + ); +} +``` + +![An example of using the isLoading state](/img/understanding/isloading.gif) + +You can find the code example [here](https://codesandbox.io/s/swr-isloading-jtopow) + +## Return previous data for better UX + +When doing data fetching based on continuous user actions, e.g. real-time search when typing, keeping the previous fetched data can improve the UX a lot. `keepPreviousData` is an option to enable that behavior. Here's a simple search UI: + +```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 => ) +
+
+ ); +} +``` + +With `keepPreviousData` enabled, you will still get the previous data even if you change the SWR key and the data for the new key starts loading again. + +