{data.name}
} ``` -------------------------------- ### Conditional Fetching with useSWR Source: https://swr.vercel.app/docs/conditional-fetching Use null or a function as the key to conditionally fetch data. If the function throws or returns a falsy value, SWR will not start the request. ```js // conditionally fetch const { data } = useSWR(shouldFetch ? '/api/data' : null, fetcher) // ...or return a falsy value const { data } = useSWR(() => shouldFetch ? '/api/data' : null, fetcher) // ...or throw an error when user.id is not defined const { data } = useSWR(() => '/api/data?uid=' + user.id, fetcher) ``` -------------------------------- ### Laggy Middleware with useRef and Usage Example Source: https://swr.vercel.app/docs/middleware Middleware that keeps the previous data when the key changes, exposing `isLagging` and `resetLaggy`. Use it by passing `use: [laggy]` to `useSWR`. The returned object includes `data`, `isLagging`, and `resetLaggy`. ```jsx import { useRef, useEffect, useCallback } from 'react' // This is a SWR middleware for keeping the data even if key changes. function laggy(useSWRNext) { return (key, fetcher, config) => { // Use a ref to store previous returned data. const laggyDataRef = useRef() // Actual SWR hook. const swr = useSWRNext(key, fetcher, config) useEffect(() => { // Update ref if data is not undefined. if (swr.data !== undefined) { laggyDataRef.current = swr.data } }, [swr.data]) // Expose a method to clear the laggy data, if any. const resetLaggy = useCallback(() => { laggyDataRef.current = undefined }, []) // Fallback to previous data if the current data is undefined. const dataOrLaggyData = swr.data === undefined ? laggyDataRef.current : swr.data // Is it showing previous data? const isLagging = swr.data === undefined && laggyDataRef.current !== undefined // Also add a `isLagging` field to SWR. return Object.assign({}, swr, { data: dataOrLaggyData, isLagging, resetLaggy, }) } } // ... inside your component useSWR(key, fetcher, { use: [laggy] }) ``` ```js const { data, isLagging, resetLaggy } = useSWR(key, fetcher, { use: [laggy] }) ``` -------------------------------- ### Traditional data fetching with useEffect and prop drilling Source: https://swr.vercel.app/docs/getting-started Shows the traditional approach of fetching data in a top-level component and passing it down via props. This example does not handle error state and requires prop drilling through multiple levels. ```jsx // page component function Page ({ userId }) { const [user, setUser] = useState(null) // fetch data useEffect(() => { fetch(`/api/user/${userId}`) .then(res => res.json()) .then(data => setUser(data)) }, [userId]) // global loading state if (!user) return
...
}
function Content ({ user }) {
return Welcome back, {user.name}
} function Avatar ({ user }) { return${data}
{isValidating ? : null}
);
}
```
--------------------------------
### Typing custom middleware
Source: https://swr.vercel.app/docs/typescript
Demonstrates how to use Middleware and SWRHook types to add types to custom SWR middleware.
```typescript
import useSWR, { Middleware, SWRHook } from 'swr'
const swrMiddleware: Middleware = (useSWRNext: SWRHook) => (key, fetcher, config) => {
// ...
return useSWRNext(key, fetcher, config)
}
```
--------------------------------
### Mutate string-based keys with a filter function
Source: https://swr.vercel.app/docs/mutation
Uses a filter function to revalidate all string keys starting with a specific API path prefix.
```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 }
)
```
--------------------------------
### useSWRMutation basic implementation
Source: https://swr.vercel.app/docs/mutation
Demonstrates defining a fetcher that accepts an argument via the arg property and triggering it manually from a component.
```tsx
import useSWRMutation from 'swr/mutation'
// Fetcher implementation.
// The extra argument will be passed via the `arg` property of the 2nd parameter.
// In the example below, `arg` will be `'my_token'`
async function updateUser(url, { arg }: { arg: string }) {
await fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${arg}`
}
})
}
function Profile() {
// A useSWR + mutate like API, but it will not start the request automatically.
const { trigger } = useSWRMutation('/api/user', updateUser, options)
return
}
```
--------------------------------
### Basic SWRConfig wrapper
Source: https://swr.vercel.app/docs/global-configuration
Wraps a component tree with SWRConfig to provide global options to all SWR hooks.
```jsx
{data.map(item =>
}
```
--------------------------------
### Pre-render with getStaticProps and SWRConfig
Source: https://swr.vercel.app/docs/with-nextjs
Uses getStaticProps to fetch data on the server and passes it to SWRConfig via the cacheData prop to hydrate the client-side SWR cache.
```jsx
export async function getStaticProps () {
// `getStaticProps` is executed on the server side.
const article = await getArticleFromAPI()
return {
props: {
cacheData: {
'/api/article': article
}
}
}
}
function Article() {
// `data` is available from the server-provided `cacheData`.
const { data } = useSWR('/api/article', fetcher)
return {item.name}
)}
{data.title}
} export default function Page({ cacheData }) { // SWR hooks inside the `SWRConfig` boundary will use those values. return ({totalUsers} users listed
{data.map((users, index) => { return users.map(user =>{user.name}
)
})}
{data.title}
} function Page({ cacheData }) { return (
setSearch(e.target.value)}
placeholder="Search..."
/>
);
}
```
--------------------------------
### Fetch with unfetch polyfill
Source: https://swr.vercel.app/docs/data-fetching
Uses the unfetch polyfill to create a fetcher that returns JSON. For Next.js, the polyfill is not needed as it has built-in fetch support.
```javascript
import fetch from 'unfetch'
const fetcher = url => fetch(url).then(r => r.json())
function App () {
const { data, error } = useSWR('/api/data', fetcher)
// ...
}
```
--------------------------------
### useSWRMutation(key, fetcher, options)
Source: https://swr.vercel.app/docs/mutation
The useSWRMutation hook provides a way to trigger mutations and manage the mutation state. It returns a trigger function that can be called to perform the mutation.
```APIDOC
## useSWRMutation(key, fetcher, options)
### Description
Provides a mutation function that can be used to trigger remote data mutations and update the cache. The returned mutate function is bound to the provided key.
### Method
N/A (JavaScript API)
### Endpoint
N/A
### Parameters
- **key** (any) - Required - The key of the SWR hook to mutate.
- **fetcher** (function) - Required - The async function to perform the remote mutation.
- **options** (object) - Optional - Configuration options for the mutation.
### Return Values
Returns an object containing the mutation function and related state (e.g., `data`, `error`, `isMutating`).
### Example
```js
import useSWRMutation from 'swr'
function Profile () {
const { trigger } = useSWRMutation('/api/user', updateUser)
return
}
```
```
--------------------------------
### Share data across components
Source: https://swr.vercel.app
Demonstrates how multiple components can call the same custom hook to share cached data without prop drilling.
```javascript
function Content({ userId }) {
const { user, isLoading } = useUser(userId)
if (isLoading) return
{data?.products.map(item =>