/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h2: "h2", p: "p", code: "code", ul: "ul", li: "li", pre: "pre", strong: "strong", hr: "hr", a: "a" }, props.components); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { children: "What is SWR?" }), "\n", _jsxs(_components.p, { children: ["Typically, when we call a REST API, we use ", _jsx(_components.code, { children: "fetch" }), " or a third-party library like ", _jsx(_components.code, { children: "axios" }), ", or, god forbid, ", _jsx(_components.code, { children: "$.ajax" }), " and ", _jsx(_components.code, { children: "XHR" }), ". The browser then makes an HTTP call and accepts a response. While the call is being made, the user waits, usually staring at a loading indicator."] }), "\n", _jsxs(_components.p, { children: ["SWR enhances data fetching with caching, revalidation, and request deduplication. The name \"SWR\" is derived from ", _jsx(_components.code, { children: "stale-while-revalidate" }), ", an HTTP cache invalidation strategy. It is back-end agnostic and supports TypeScript. It exposes React hooks that we can use for data fetching in our applications."] }), "\n", _jsx(_components.h2, { children: "Why use SWR instead of fetch/axios?" }), "\n", _jsx(_components.p, { children: "When we use SWR for data fetching, it returns the data from cache (stale), then sends the request (revalidate) and returns the up-to-date data. SWR will automatically cache the response the first time we fetch it." }), "\n", _jsx(_components.p, { children: "This translates to a real-time experience for users who instantly see UI being rendered on-screen, while our application fetches the up-to-date data. SWR also has some cool features out-of-the-box:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Auto revalidation" }), "\n", _jsx(_components.li, { children: "Support for React Suspense" }), "\n", _jsx(_components.li, { children: "Fast page navigation" }), "\n", _jsx(_components.li, { children: "Pagination" }), "\n", _jsx(_components.li, { children: "Scroll position recovery" }), "\n", _jsx(_components.li, { children: "Retry on error" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Why do we still need fetch/axios when using SWR" }), "\n", _jsxs(_components.p, { children: ["SWR does not replace native ", _jsx(_components.code, { children: "fetch" }), " or ", _jsx(_components.code, { children: "axios" }), ". We'll end up using them anyway because SWR only wraps around them. One of the arguments we pass to the ", _jsx(_components.code, { children: "useSWR" }), " hook is a fetcher function that uses ", _jsx(_components.code, { children: "fetch" }), " or ", _jsx(_components.code, { children: "axios" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Using Fetch API\nexport const fetcher = async (url, opts = {}) => {\n\tconst res = await fetch(url, opts)\n\tif (!res.ok) {\n\t\tthrow new Error('Error completing request')\n\t}\n\n\treturn await res.json()\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["We can then use the ", _jsx(_components.code, { children: "useSWR" }), " hook to fetch data."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "const { data, error } = useSWR(`/api/users/${userId}`, fetcher)\n" }) }), "\n", _jsx(_components.p, { children: "We can also configure SWR globally in our applications. We can skip passing the fetcher function if we do this:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "function App({ Component, pageProps }) {\n\treturn (\n\t\t\n\t\t\t \n\t\t\n\t)\n}\n" }) }), "\n", _jsx(_components.p, { children: "The real power of using SWR shows when you can reuse data fetching code. When building an application, we might need to reuse the data we fetch in multiple places. SWR makes it incredibly easy to create custom data fetching hooks that we can use in any of our components." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "export function useUser(userId) {\n\tconst { data, error } = useSWR(`/api/users/${userId}`, fetcher)\n\treturn {\n\t\tuser: data?.user,\n\t\tisLoading: !error && !data,\n\t\tisError: error,\n\t}\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Now we can use the ", _jsx(_components.code, { children: "useUser" }), " hook in our components like this:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "function Profile({ userId }) {\n\tconst { user, isLoading, isError } = useUser(userId)\n\n\tif (isLoading) return

\n\tif (isError) return

An error occurred...

\n\n\treturn (\n\t\t

\n\t\t\t

{user.name} \n\t\t\t {user.email} \n\t\t

\n\t)\n}\n" }) }), "\n", _jsx(_components.h2, { children: "Configuring revalidation" }), "\n", _jsxs(_components.p, { children: ["SWR offers multiple revalidation strategies. We can use one or all of them. We can also pick and choose which of our fetch requests use which strategies. We can also globally configure revalidation strategies in ", _jsx(_components.code, { children: "SWRConfig" }), " provider."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Revalidation on focus" }), ": When the tab comes into focus, SWR will revalidate. Enabled by default."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Revalidation on network recovery" }), ": When our device reconnects to the internet, SWR will revalidate. Enabled by default."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Polling on interval" }), ": It can automatically make fetch requests at specified intervals so our UI is always up-to-date. Disabled by default. If enabled, there are two more options that we can use to enable polling even when the browser tab is not active or when we're not connected to the internet."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Mutation" }), "\n", _jsxs(_components.p, { children: ["SWR will revalidate our data when one of the above strategies is used. We can also manually trigger revalidation using ", _jsx(_components.code, { children: "mutate(key)" }), ". The ", _jsx(_components.code, { children: "key" }), " is the URL where we fetch the data."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "mutate(`/api/users/${userId}`)\n" }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "useSWR" }), " hook also returns a ", _jsx(_components.code, { children: "mutate" }), " function that we can use which doesn't need a ", _jsx(_components.code, { children: "key" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "const { user, mutate } = useSWR(`/api/users/${userId}`, fetcher)\n" }) }), "\n", _jsx(_components.h2, { children: "POST requests" }), "\n", _jsx(_components.p, { children: "SWR lets us do optimistic rendering by local mutation — where we update the UI based on new data immediately — before we even update the database with POST requests." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "const { user } = useUser(userId);\n\n...\n\nconst formSubmitHandler = async (values) => {\n // Update local data immediately and disable revalidation\n mutate(`/api/users/${userId}`, { ...user, ...values }, false);\n\n // Make the API request to update the database\n await updateUser(values);\n\n // Trigger revalidation to ensure local data is correct\n mutate(`/api/users/${userId}`);\n}\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "SWR is a better way to fetch data in our React applications. It abstracts away many features that we normally would have written ourselves if our application requires them. It also gives us good defaults so we don't have to spend a lot of time in configuration. Most important of all, it has a simple API and is easy to use." }), "\n", _jsxs(_components.p, { children: ["There is also an alternative to SWR called ", _jsx(_components.a, { href: "*https://react-query.tanstack.com/*", children: _jsx(_components.code, { children: "react-query" }) }), " which I haven't used, yet. I'll cover that in a future post."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Supercharging data fetching in React with SWR