Suspensive

https://suspensive.org/ko/docs/introduction
Admin
Suspensive is a comprehensive collection of libraries designed to simplify and enhance the use of...
Tokens:27,545
Snippets:139
Trust Score:6.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Add @suspensive/jotai as a Project Dependency

Source: https://suspensive.org/ko/docs/introduction/jotai/installation

Use one of the following commands to install the @suspensive/jotai package into your project using your preferred JavaScript package manager.

```npm
npm install @suspensive/jotai
```

```pnpm
pnpm add @suspensive/jotai
```

```yarn
yarn add @suspensive/jotai
```

```bun
bun add @suspensive/jotai
```

--------------------------------

### Install @suspensive/react-query with latest @tanstack/react-query

Source: https://suspensive.org/ko/docs/introduction/react-query/installation

Commands to install the `@suspensive/react-query` library along with `@suspensive/react` and the latest stable version of `@tanstack/react-query`. These commands are suitable for modern browser environments and the latest React versions.

```npm
npm install @suspensive/react-query @suspensive/react @tanstack/react-query
```

```pnpm
pnpm add @suspensive/react-query @suspensive/react @tanstack/react-query
```

```yarn
yarn add @suspensive/react-query @suspensive/react @tanstack/react-query
```

```bun
bun add @suspensive/react-query @suspensive/react @tanstack/react-query
```

--------------------------------

### Install @suspensive/react as a dependency

Source: https://suspensive.org/ko/docs/introduction/react/installation

Commands to install the @suspensive/react library using different package managers. This adds the library to your project's dependencies, enabling its use in your application.

```npm
npm install @suspensive/react
```

```pnpm
pnpm add @suspensive/react
```

```yarn
yarn add @suspensive/react
```

```bun
bun add @suspensive/react
```

--------------------------------

### Install @suspensive/react-query with @tanstack/react-query v4

Source: https://suspensive.org/ko/docs/introduction/react-query/installation

Commands to install `@suspensive/react-query` specifically with `@tanstack/react-query` version 4. This option is useful for projects requiring compatibility with older browser versions, as `@tanstack/react-query` v4 offers broader browser support than v5.

```npm
npm install @suspensive/react-query @suspensive/react @tanstack/react-query@4
```

```pnpm
pnpm add @suspensive/react-query @suspensive/react @tanstack/react-query@4
```

```yarn
yarn add @suspensive/react-query @suspensive/react @tanstack/react-query@4
```

```bun
bun add @suspensive/react-query @suspensive/react @tanstack/react-query@4
```

--------------------------------

### Interactive usePrefetchQuery Example with Post Navigation

Source: https://suspensive.org/ko/docs/introduction/react-query/usePrefetchQuery

A more complete example demonstrating usePrefetchQuery in an interactive scenario. It allows users to navigate between posts using buttons, with usePrefetchQuery proactively fetching the next/previous post's data. Includes the getPost utility function for fetching data from a placeholder API.

```javascript
import { Suspense } from '@suspensive/react'
import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
import { useState } from 'react'

export const Example = () => {
  const [postId, setPostId] = useState(1)
  usePrefetchQuery({
    queryKey: ['posts', postId],
    queryFn: () => getPost(postId),
  })

  return (
    <div>
      <button
        onClick={() => setPostId((prev) => prev - 1)}
        disabled={postId === 1}
      >
        Previous Post
      </button>
      <button
        onClick={() => setPostId((prev) => prev + 1)}
        disabled={postId === 100}
      >
        Next Post
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <Post postId={postId} />
      </Suspense>
    </div>
  )
}

const Post = ({ postId }: { postId: number }) => {
  const { data } = useSuspenseQuery({
    queryKey: ['posts', postId],
    queryFn: () => getPost(postId),
  })

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  )
}

const getPost = (postId: number) =>
  fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then<{
    id: number
    title: string
    body: string
  }>((res) => res.json())
```

--------------------------------

### Add @suspensive/react-dom as a project dependency

Source: https://suspensive.org/ko/docs/introduction/react-dom/installation

Commands to install the @suspensive/react-dom library using different JavaScript package managers. Choose the command that corresponds to your preferred package manager.

```npm
npm install @suspensive/react-dom
```

```pnpm
pnpm add @suspensive/react-dom
```

```yarn
yarn add @suspensive/react-dom
```

```bun
bun add @suspensive/react-dom
```

--------------------------------

### Get help for @suspensive/react-query CLI commands

Source: https://suspensive.org/ko/docs/introduction/react-query/tanstack-query-compatibility

Command to display usage information for specific CLI commands or general help for the @suspensive/react-query CLI. For example, to learn more about the `fix` command.

```shell
npx suspensive-react-query fix -h
```

```shell
npx suspensive-react-query --help
```

--------------------------------

### React Component Example with SuspenseInfiniteQuery and Query Reset

Source: https://suspensive.org/ko/docs/introduction/react-query/infiniteQueryOptions

This example showcases a React component that utilizes `SuspenseInfiniteQuery` with `infiniteQueryOptions` to display paginated posts, including a loading fallback. It also demonstrates how to integrate `queryClient` to reset the infinite query, providing a complete user interface for managing and interacting with infinite data.

```javascript
import { Suspense } from '@suspensive/react'
import {
  infiniteQueryOptions,
  SuspenseInfiniteQuery,
} from '@suspensive/react-query'
import { useQueryClient } from '@tanstack/react-query'
import { getPosts } from './api'

const postsInfiniteQueryOptions = (page) =>
  infiniteQueryOptions({
    queryKey: ['posts', page],
    queryFn: ({ queryKey: [, page] }) => getPosts(page),
    getNextPageParam: (lastPage) => lastPage.nextPage ?? false,
  })

export const Example = () => {
  const queryClient = useQueryClient()

  return (
    <div>
      <button
        onClick={() => queryClient.resetQueries(postsInfiniteQueryOptions(1))}
      >
        Reset Query
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <SuspenseInfiniteQuery {...postsInfiniteQueryOptions(1)}>
          {({ data, fetchNextPage, hasNextPage }) => (
            <div>
              {data.pages.map((page, index) => (
                <div key={index}>
                  {page.posts.map((post) => (
                    <div key={post.id}>
                      <h1>{post.title}</h1>
                      <p>{post.body}</p>
                    </div>
                  ))}
                </div>
              ))}
              <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
                Load More
              </button>
            </div>
          )}
        </SuspenseInfiniteQuery>
      </Suspense>
    </div>
  )
}
```

--------------------------------

### Advanced DefaultPropsProvider Example with Suspense and Delay Fallbacks

Source: https://suspensive.org/ko/docs/introduction/react/DefaultPropsProvider

This comprehensive example demonstrates `DefaultPropsProvider` configuring `Suspense` and `Delay` components with custom fallbacks and `clientOnly` settings. It integrates `SuspenseQuery` to fetch data, showcasing how global default props apply to nested Suspensive components, providing a unified loading experience within a React application.

```typescript
import {
  DefaultProps,
  DefaultPropsProvider,
  Suspense,
  Delay,
} from '@suspensive/react'
import { SuspenseQuery } from '@suspensive/react-query'
import { fetch1sQueryOptions } from './queries'

const defaultProps = new DefaultProps({
  Delay: {
    ms: 1200,
    fallback: (
      <div style={{ padding: 10, background: 'lightyellow' }}>
        Loading additional content...
      </div>
    ),
  },
  Suspense: {
    fallback: (
      <div style={{ padding: 10, background: 'lightblue' }}>
        Fetching post...
      </div>
    ),
    clientOnly: false,
  },
})

export const Example = () => {
  return (
    <DefaultPropsProvider defaultProps={defaultProps}>
      <div
        style={{
          fontFamily: 'Arial, sans-serif',
          maxWidth: '300px',
          margin: '20px auto',
        }}
      >
        <Suspense>
          <SuspenseQuery {...fetch1sQueryOptions(1)}>
            {({ data }) => (
              <div style={{ padding: 15, background: '#f0f0f0' }}>
                <h2>{data.title}</h2>
                <p>ID: {data.id}</p>
                <Delay>
                  <div
                    style={{
                      marginTop: 10,
                      padding: 10,
                      background: '#e0e0e0',
                    }}
                  >
                    <h3>Additional Details:</h3>
                    <p>{data.body}</p>
                  </div>
                </Delay>
              </div>
            )}
          </SuspenseQuery>
        </Suspense>
      </div>
    </DefaultPropsProvider>
  )
}
```

--------------------------------

### Interactive User and Posts Example with SuspenseQuery

Source: https://suspensive.org/ko/docs/introduction/react-query/SuspenseQuery

This React component provides an interactive example of fetching user data and posts using `SuspenseQuery`. It includes state management for changing users and filtering posts based on a 'Show All Posts' checkbox, demonstrating dynamic data fetching and rendering with `Suspense` and `ErrorBoundary`.

```jsx
import { useState } from 'react'
import { ErrorBoundary, Suspense } from '@suspensive/react'
import { SuspenseQuery } from '@suspensive/react-query'
import { PostListItem } from './PostListItem'
import { UserProfile } from './UserProfile'
import { postsQueryOptions, userQueryOptions } from './queries'

export const Example = () => {
  const [userId, setUserId] = useState(1)
  const [showAllPosts, setShowAllPosts] = useState(false)

  return (
    <ErrorBoundary fallback={({ error }) => <>{error.message}</>>}>
      <button onClick={() => setUserId((id) => id - 1)} disabled={userId === 1}>
        Previous User
      </button>
      <button
        onClick={() => setUserId((id) => id + 1)}
        disabled={userId === 10}
      >
        Next User
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <SuspenseQuery {...userQueryOptions(userId)}>
          {({ data: user }) => <UserProfile key={user.id} {...user} />}
        </SuspenseQuery>

        <label>
          <input
            type="checkbox"
            checked={showAllPosts}
            onChange={() => setShowAllPosts((showAllPosts) => !showAllPosts)}
          />
          Show All Posts
        </label>

        <SuspenseQuery
          {...postsQueryOptions(userId)}
          select={(posts) =>
            posts.filter(({ isPublic }) => showAllPosts || isPublic)
          }
        >
          {({ data: posts }) => (
            <ol>
              {posts.map((post) => (
                <PostListItem key={post.id} {...post} />
              ))}
            </ol>
          )}
        </SuspenseQuery>
      </Suspense>
    </ErrorBoundary>
  )
}
```

--------------------------------

### Run @suspensive/react-query CLI

Source: https://suspensive.org/ko/docs/introduction/react-query/tanstack-query-compatibility

Shows how to invoke the @suspensive/react-query Command-Line Interface (CLI) directly from the command line using `npx`. No additional installation is required as it's included with the package.

```shell
npx suspensive-react-query
```

```shell
npx srq
```

--------------------------------

### React Component Example with SuspenseQuery and queryOptions

Source: https://suspensive.org/ko/docs/introduction/react-query/queryOptions

This example showcases the integration of `queryOptions` within a React component using `SuspenseQuery` from `@suspensive/react-query`. It includes a button to reset the query via `queryClient.resetQueries` and demonstrates how to render fetched data, highlighting the use of Suspense for loading states.

```typescript
import { Suspense } from '@suspensive/react'
import { queryOptions, SuspenseQuery } from '@suspensive/react-query'
import { useQueryClient } from '@tanstack/react-query'
import { getPost } from './api'

const postQueryOptions = (postId: number) =>
  queryOptions({
    queryKey: ['posts', postId],
    queryFn: () => getPost(postId),
  })

export const Example = () => {
  const queryClient = useQueryClient()

  return (
    <div>
      <button onClick={() => queryClient.resetQueries(postQueryOptions(1))}>
        Reset Query
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <SuspenseQuery {...postQueryOptions(1)}>
          {({ data }) => {
            return (
              <div>
                <h1>{data.title}</h1>
                <p>{data.body}</p>
              </div>
            )
          }}
        </SuspenseQuery>
      </Suspense>
    </div>
  )
}
```

--------------------------------

### TanStack Query Import Transformation Example

Source: https://suspensive.org/ko/docs/introduction/codemods/tanstackQueryImport

This example illustrates how the codemod automatically transforms import paths. It shows the 'before' state where imports originate from `@suspensive/react-query` or its versioned packages, and the 'after' state where they are correctly redirected to `@tanstack/react-query`.

```javascript
import { queryOptions } from '@suspensive/react-query'
import { useSuspenseQuery } from '@suspensive/react-query-5' // The versioned package is also transformed!
```

```javascript
import { queryOptions } from '@tanstack/react-query'
import { useSuspenseQuery } from '@tanstack/react-query'
```

--------------------------------

### Fetching multiple related data with useSuspenseQueries in React

Source: https://suspensive.org/ko/docs/introduction/react-query/useSuspenseQueries

An example showing how to use `useSuspenseQueries` to fetch related data, such as a post and its comments, and render them in a React component. This illustrates a practical application within a component context, demonstrating how to access and display the fetched data.

```typescript
import { useSuspenseQueries } from '@suspensive/react-query'
import { getPost, getComments } from './api'

export const Post = ({ postId }: { postId: number }) => {
  const [postQuery, commentQuery] = useSuspenseQueries({
    queries: [
      { queryKey: ['posts', postId], queryFn: () => getPost(postId) },
      { queryKey: ['comments', postId], queryFn: () => getComments(postId) },
    ],
  })

  return (
    <div>
      <h1>{postQuery.data.title}</h1>
      <p>{postQuery.data.body}</p>
      <h2>Comments</h2>
      <ul>
        {commentQuery.data.map((comment) => (
          <li key={comment.id}>{comment.body}</li>
        ))}
      </ul>
    </div>
  )
}
```

--------------------------------

### Example of implicit atom usage in a child component (ShoppingCart)

Source: https://suspensive.org/ko/docs/introduction/jotai/Atom

This example presents a ShoppingCart component that uses the Atom component internally. Similar to the UserInfo example, it demonstrates how the internal usage of atoms and their potential to trigger Suspense might not be immediately clear from the component's interface, reinforcing the motivation for more explicit declarative patterns.

```TypeScript
// payment/components/ShoppingCart.tsx
import { Atom } from '@suspensive/jotai'
import { Suspense } from '@suspensive/react'
import { shoppingCartAtom } from '~/atoms'

// It's not clear from the usage of this component what Atom ShoppingCart uses internally and whether it triggers Suspense.
const ShoppingCart = () => {
  const [data] = useAtom(shoppingCartAtom)

  return (
    <>
      {data.map((item) => (
        <ShoppingItem key={item.id} {...item} />
      ))}
    </>
  )
}
```

--------------------------------

### Using SetAtom with a synchronous Jotai atom

Source: https://suspensive.org/ko/docs/introduction/jotai/SetAtom

This example demonstrates how to use the <SetAtom/> component with a synchronous Jotai atom. It shows a basic setup where buttons update a boolean atom's state to true or false using the provided setCount function.

```javascript
import { SetAtom } from '@suspensive/jotai'
import { atom } from 'jotai'

const switchAtom = atom(false)

const Example = () => (
  <SetAtom atom={switchAtom}>
    {(setCount) => (
      <>
        <button onClick={() => setCount(true)}>Set True</button>
        <button onClick={() => setCount(false)}>Set False</button>
      </>
    )}
  </SetAtom>
)
```

--------------------------------

### Fetching Post Data with useSuspenseQuery in a Component

Source: https://suspensive.org/ko/docs/introduction/react-query/useSuspenseQuery

An example of integrating `useSuspenseQuery` within a React component to fetch and display post data. This snippet illustrates how to use `queryKey` and `queryFn` to retrieve data from an API and render it directly, leveraging the guaranteed data presence.

```typescript
import { useSuspenseQuery } from '@suspensive/react-query'
import { getPost } from './api'

export const Post = ({ postId }: { postId: number }) => {
  const { data } = useSuspenseQuery({
    queryKey: ['posts', postId],
    queryFn: () => getPost(postId),
  })

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  )
}
```

--------------------------------

### Advanced SuspenseInfiniteQuery with Custom Pagination

Source: https://suspensive.org/ko/docs/introduction/react-query/SuspenseInfiniteQuery

Presents a more detailed example of <SuspenseInfiniteQuery/>, showcasing how to implement custom pagination logic using getNextPageParam and manage loading states and button availability for infinite scrolling.

```jsx
import React from 'react'
import { SuspenseInfiniteQuery } from '@suspensive/react-query'
import { Suspense, ErrorBoundary } from '@suspensive/react'
import { PostListItem } from './PostListItem'
import { postsInfiniteQueryOptions } from './queries'

export const Example = () => {
  return (
    <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
      <Suspense fallback={<div>Loading...</div>}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            marginBottom: '50px',
          }}
        >
          <SuspenseInfiniteQuery
            {...postsInfiniteQueryOptions()}
            getNextPageParam={(lastPage, allPages) => {
              return lastPage.skip + lastPage.limit < lastPage.total
                ? allPages.length + 1
                : undefined
            }}
          >
            {({
              data: { pages },
              fetchNextPage,
              hasNextPage,
              isFetchingNextPage,
              isFetched,
            }) => (
              <>
                <ol>
                  {pages.map((page) =>
                    page.data.map((post) => (
                      <PostListItem key={post.id} {...post} />
                    ))
                  )}
                </ol>
                <button
                  onClick={() => fetchNextPage()}
                  disabled={!hasNextPage || isFetchingNextPage}
                >
                  {isFetchingNextPage
                    ? 'Loading more...'
                    : hasNextPage
                      ? 'Load More'
                      : 'Nothing more to load'}
                </button>
              </>
            )}
          </SuspenseInfiniteQuery>
        </div>
      </Suspense>
    </ErrorBoundary>
  )
}
```

--------------------------------

### React Delay Component with Fallback Prop Examples

Source: https://suspensive.org/ko/docs/introduction/react/Delay

Demonstrates how to use the `fallback` prop with the `Delay` component to display placeholder content while the main children are being delayed. Includes examples showing different delay durations and styling.

```tsx
import { Delay } from '@suspensive/react'

const Example = () => (
  <Delay ms={200} fallback={<>Fallback Text</>}>
    200ms delayed Text
  </Delay>
)
```

```tsx
import { Delay } from '@suspensive/react'

export const Example = () => {
  return (
    <div style={{ padding: 20, backgroundColor: 'lightblue' }}>
      <Delay ms={1000} fallback={<>Fallback Text</>}>
        1s delayed Text
      </Delay>
    </div>
  )
}
```

--------------------------------

### Example of `with` API Usage (After Codemod)

Source: https://suspensive.org/ko/docs/introduction/codemods/migrateWithAPI

Shows the transformed code using the new `with` API in `@suspensive/react` v3. This pattern nests components with their respective `with` methods, replacing the `wrap` builder for a more direct composition approach.

```javascript
import { ErrorBoundaryGroup, ErrorBoundary, Suspense } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'

const Example = ErrorBoundaryGroup.with(
  { blockOutside: false },
  ErrorBoundary.with(
    {
      fallback: ({ error }) => <>{error.message}</>,
      onError: logger.log,
    },
    Suspense.with({ fallback: <>loading...</>, clientOnly: true }, () => {
      return <>Example</>
    })
  )
)
```

--------------------------------

### Using mutationOptions with @suspensive/react-query

Source: https://suspensive.org/ko/docs/introduction/react-query/mutationOptions

These examples illustrate how to define and apply `mutationOptions` for managing mutation configurations in `@suspensive/react-query`. They cover usage with the `useMutation` hook and the `<Mutation />` component, demonstrating both direct API calls and integration with external functions and `mutationKey`.

```typescript
import { mutationOptions, useMutation, Mutation } from '@suspensive/react-query'

const editPostMutationOptions = (postId: number) =>
  mutationOptions({
    mutationFn: (content: string) => fetch(`https://example.com/posts/${postId}`, {
      method: 'PATCH',
      body: JSON.stringify({ content })
    }).then(res => res.json())
  })

// You can directly use mutationOptions without creating custom mutation hooks.
const editPostMutation = useMutation(editPostMutationOptions(1))

// Directly use mutationOptions with <Mutation />.
const Example = () => (
  <Mutation {...editPostMutationOptions(1)}>
    {({ mutate, isLoading }) => (
      <div>
        <p>{isLoading ? 'Updating...' : 'Latest updated'}</p>
        <textarea onBlur={(e) => mutate(e.target.value)} disabled={isLoading} />
      </div>
    )}
  </Mutation>
)
```

```typescript
import { Mutation, mutationOptions } from '@suspensive/react-query'
import { editPost } from './api'

const editPostMutationOptions = (postId: number) =>
  mutationOptions({
    mutationKey: ['edit-post', postId],
    mutationFn: (content: string) => editPost(postId, content)
  })

export const Example = () => {
  return (
    <Mutation {...editPostMutationOptions(1)}>
      {({ mutate, isLoading }) => (
        <div>
          <p>{isLoading ? 'Updating...' : 'Latest updated'}</p>
          <textarea
            placeholder="Edit content"
            onBlur={(e) => mutate(e.target.value)}
            disabled={isLoading}
          />
        </div>
      )}
    </Mutation>
  )
}
```

--------------------------------

### Basic useSuspenseQuery Example

Source: https://suspensive.org/ko/docs/introduction/react-query/useSuspenseQuery

Demonstrates the basic usage of `useSuspenseQuery` from `@suspensive/react-query`. It shows that `suspense: true` is the default behavior and that no type narrowing with `isSuccess` is required for the `query.data` property, as data is guaranteed to be present.

```typescript
import { useSuspenseQuery } from '@suspensive/react-query'

const Example = () => {
  const query = useSuspenseQuery({
    queryKey,
    queryFn,
  }) // suspense: true is the default.

  // No type narrowing required with isSuccess.
  query.data // TData
}
```

--------------------------------

### Example Usage of PrefetchInfiniteQuery Component in React

Source: https://suspensive.org/ko/docs/introduction/react-query/PrefetchInfiniteQuery

This code snippet demonstrates how to use the <PrefetchInfiniteQuery/> component to prefetch data for infinite queries within a React component. It addresses the limitation of not being able to call usePrefetchInfiniteQuery inside conditional rendering or loops by providing a JSX alternative. The example uses @suspensive/react-dom's InView component to trigger the prefetching when a post enters the viewport, ensuring data is ready before the user navigates to the comments page.

```TypeScript
import {
  PrefetchInfiniteQuery,
  useSuspenseQuery,
} from '@suspensive/react-query'
import { InView } from '@suspensive/react-dom'

const PostsPage = () => {
  const { data: posts } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: () => getPosts(),
  })

  return posts.map((post) => (
    <InView>
      {({ ref, inView }) => (
        <>
          {inView ? (
            // 🚫 We can not invoke usePrefetchInfiniteQuery like below because of React Hook rules
            // usePrefetchInfiniteQuery({
            //   queryKey: ['posts', post.id, 'comments'],
            //   queryFn: () => getPostComments(post.id),
            // })

            // ✅ We can invoke usePrefetchInfiniteQuery for each post comments query before entering Post Comments page
            <PrefetchInfiniteQuery
              queryKey={['posts', post.id, 'comments']}
              queryFn={() => getPostComments(post.id)}
            />
          ) : null}
          <div ref={ref}>
            <h2>{post.title}</h2>
            <p>{post.description}</p>
            <Link to={`/posts/${post.id}/comments`}>See comments</Link>
          </div>
        </>
      )}
    </InView>
  ))
}
```

--------------------------------

### Basic Usage of DefaultPropsProvider for Global Component Settings

Source: https://suspensive.org/ko/docs/introduction/react/DefaultPropsProvider

This snippet demonstrates the basic setup of `DefaultPropsProvider` from `@suspensive/react`. It shows how to create a `DefaultProps` instance to define global settings for Suspensive components like `Delay` (e.g., `ms`) and `Suspense` (e.g., `fallback`, `clientOnly`), and then wrap the application with `DefaultPropsProvider` to apply these settings.

```typescript
import { DefaultProps, DefaultPropsProvider } from '@suspensive/react'

const defaultProps = new DefaultProps({
  Delay: {
    ms: 1200,
  },
  Suspense: {
    fallback: <Spinner />,
    clientOnly: false,
  },
})

function App() {
  return (
    <DefaultPropsProvider defaultProps={defaultProps}>...</DefaultPropsProvider>
  )
}
```

--------------------------------

### Complete ErrorBoundary Example with CustomError and Async State

Source: https://suspensive.org/ko/docs/introduction/react/ErrorBoundary

A comprehensive example demonstrating ErrorBoundary in action, including the definition of a CustomError class and a CustomErrorAfter2s component that simulates an asynchronous operation throwing this custom error. It showcases how the ErrorBoundary catches and displays the specific error message.

```typescript
import { ErrorBoundary } from '@suspensive/react'
import { useState, useEffect, createElement } from 'react'

export const Example = () => {
  return (
    <ErrorBoundary
      fallback={({ error }) => (
        <>Parent ErrorBoundary fallback: {error.message}</>
      )}
    >
      <ErrorBoundary
        shouldCatch={CustomError}
        fallback={({ error }) => (
          <>Child ErrorBoundary fallback: {error.message}</>
        )}
      >
        <CustomErrorAfter2s />
      </ErrorBoundary>
    </ErrorBoundary>
  )
}

export class CustomError extends Error {
  constructor(...args: ConstructorParameters<ErrorConstructor>) {
    super(...args)
    console.error(...args)
  }
}

export const CustomErrorAfter2s = () => {
  const [asyncState, setAsyncState] = useState<
    { isError: true; error: CustomError } | { isError: false; error: null }
  >({
    isError: false,
    error: null,
  })

  useEffect(() => {
    setTimeout(() => {
      setAsyncState({
        isError: true,
        error: () => new CustomError('error made by CustomError'),
      })
    }, 2000)
  }, [])

  if (asyncState.isError) {
    throw asyncState.error()
  }

  return <>No error</>
}
```

--------------------------------

### Implementing infinite scroll with useSuspenseInfiniteQuery

Source: https://suspensive.org/ko/docs/introduction/react-query/useSuspenseInfiniteQuery

This example showcases a complete React component, PostList, that utilizes useSuspenseInfiniteQuery to implement an infinite scrolling feature. It includes logic for fetching paginated data, determining the next page, automatically scrolling to new content, and rendering a 'Load More' button.

```typescript
import { useSuspenseInfiniteQuery } from '@suspensive/react-query'
import { useEffect, Fragment } from 'react'
import { getPosts } from './api'

export const PostList = () => {
  const { data, isFetchingNextPage, isFetched, hasNextPage, fetchNextPage } =
    useSuspenseInfiniteQuery({
      queryKey: ['posts'],
      queryFn: ({ pageParam = 1 }) => getPosts(pageParam),
      getNextPageParam: (lastPage, allPages) =>
        lastPage.skip + lastPage.limit < lastPage.total
          ? allPages.length + 1
          : undefined,
    })

  useEffect(() => {
    if (!isFetchingNextPage && isFetched) {
      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth',
      })
    }
  }, [isFetchingNextPage, isFetched])

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        marginBottom: '100px',
      }}
    >
      <ol>
        {data.pages.map((page, i) => (
          <Fragment key={i}>
            {page.data.map((post) => (
              <li key={post.id} style={{ marginBottom: '10px' }}>
                {post.title}
              </li>
            ))}
          </Fragment>
        ))}
      </ol>
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
      </button>
    </div>
  )
}
```

--------------------------------

### Display @suspensive/react-query version

Source: https://suspensive.org/ko/docs/introduction/react-query/tanstack-query-compatibility

Command to display the installed version of the @suspensive/react-query package. This reflects the package version specified in `package.json` and does not indicate the internal compatibility version.

```shell
npx suspensive-react-query -v
```

```shell
npx suspensive-react-query --version
```

--------------------------------

### Complete ErrorBoundary Example with Generic Error and Async State

Source: https://suspensive.org/ko/docs/introduction/react/ErrorBoundary

This example provides a full demonstration of ErrorBoundary catching a standard JavaScript Error instance. It includes an ErrorAfter2s component that throws a generic error after a delay, illustrating how ErrorBoundary can handle common runtime errors.

```typescript
import { ErrorBoundary } from '@suspensive/react'
import { useState, useEffect, createElement } from 'react'

export const Example = () => {
  return (
    <ErrorBoundary
      fallback={({ error }) => (
        <>Parent ErrorBoundary fallback: {error.message}</>
      )}
    >
      <ErrorBoundary
        shouldCatch={CustomError}
        fallback={({ error }) => (
          <>Child ErrorBoundary fallback: {error.message}</>
        )}
      >
        <ErrorAfter2s />
      </ErrorBoundary>
    </ErrorBoundary>
  )
}

export class CustomError extends Error {
  constructor(...args: ConstructorParameters<ErrorConstructor>) {
    super(...args)
    console.error(...args)
  }
}

export const ErrorAfter2s = () => {
  const [asyncState, setAsyncState] = useState<
    { isError: true; error: Error } | { isError: false; error: null }
  >({
    isError: false,
    error: null,
  })

  useEffect(() => {
    setTimeout(() => {
      setAsyncState({ isError: true, error: new Error('error made by Error') })
    }, 2000)
  }, [])

  if (asyncState.isError) {
    throw asyncState.error
  }

  return <>No error</>
}
```

--------------------------------

### Using QueryClientConsumer to Invalidate Queries

Source: https://suspensive.org/ko/docs/introduction/react-query/QueryClientConsumer

This example demonstrates the basic usage of <QueryClientConsumer/> to access the queryClient instance and invalidate queries, specifically for refreshing a list of posts. It shows how to integrate it with useSuspenseQuery for data fetching.

```TypeScript
import { useSuspenseQuery } from '@tanstack/react-query'
import { QueryClientConsumer } from '@suspensive/react-query'

const PostsPage = () => {
  const { data: posts } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: () => getPosts(),
  })

  return (
    <>
      <QueryClientConsumer>
        {(queryClient) => (
          <button
            onClick={() =>
              queryClient.invalidateQueries({
                queryKey: ['posts'],
              })
            }
          >
            Posts refresh
          </button>
        )}
      </QueryClientConsumer>
      {posts.map((post) => (
        <Post key={post.id} {...post} />
      ))}
    </>
  )
}
```

--------------------------------

### Dynamic SuspenseQueries with User Interaction

Source: https://suspensive.org/ko/docs/introduction/react-query/SuspenseQueries

This example illustrates how to use `<SuspenseQueries/>` with dynamic data based on user interaction (changing `userId`). It showcases fetching multiple queries for different users and updating the UI accordingly, also incorporating `ErrorBoundary` and `Suspense` for robust data fetching.

```jsx
import { useState } from 'react'
import { SuspenseQueries } from '@suspensive/react-query'
import { Suspense, ErrorBoundary } from '@suspensive/react'
import { PostListItem } from './PostListItem'
import { UserProfile } from './UserProfile'
import { userQueryOptions, postsQueryOptions } from './queries'

export const Example = () => {
  const [userId, setUserId] = useState(1)

  return (
    <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
      <button onClick={() => setUserId((id) => id - 1)} disabled={userId === 1}>
        Previous User
      </button>
      <button
        onClick={() => setUserId((id) => id + 1)}
        disabled={userId === 10}
      >
        Next User
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <SuspenseQueries
          queries={[userQueryOptions(userId), postsQueryOptions(userId)]}
        >
          {([{ data: user }, { data: posts }]) => (
            <>
              <UserProfile {...user} />
              <ol>
                {posts.map((post) => (
                  <PostListItem key={post.id} {...post} />
                ))}
              </ol>
            </>
          )}
        </SuspenseQueries>
      </Suspense>
    </ErrorBoundary>
  )
}
```

--------------------------------

### Example of `wrap` API Usage (Before Codemod)

Source: https://suspensive.org/ko/docs/introduction/codemods/migrateWithAPI

Illustrates the original `wrap` builder pattern in `@suspensive/react` v2, which chains component wrappers. This is the code structure that the `migrate-with-api` codemod targets for transformation.

```javascript
import { wrap } from '@suspensive/react'

const Example = wrap
  .ErrorBoundaryGroup({ blockOutside: false })
  .ErrorBoundary({
    fallback: ({ error }) => <>{error.message}</>,
    onError: logger.log,
  })
  .Suspense({ fallback: <>loading...</>, clientOnly: true })
  .on(() => {
    return <>Example</>
  })
```

--------------------------------

### Replace `withSuspense` HOC with `wrap` builder (simple case)

Source: https://suspensive.org/ko/docs/introduction/react/migration/migrate-to-v2

Shows a simpler example of migrating from the `withSuspense` HOC to the `wrap` builder for managing suspense boundaries in Suspensive.js v2. This illustrates the more concise syntax for basic suspense wrapping.

```JavaScript
+ import { wrap } from '@suspensive/react'
- import { withSuspense } from '@suspensive/react'

+ const Example = wrap
+   .Suspense({
+     fallback: <>loading...</>,
+     clientOnly: true,
+   })
+   .on(() => {
+     const query = useSuspenseQuery({
+       queryKey: ['key'],
+       queryFn: () => api.text(),
+     })
+     return <>{query.data.text}</>
+   })
- const Example = withSuspense(
-   () => {
-     const query = useSuspenseQuery({
-       queryKey: ['key'],
-       queryFn: () => api.text(),
-     })
-     return <>{query.data.text}</>
-   },
-   {
-     fallback: <>loading...</>,
-     clientOnly: true,
-   }
- )
```

--------------------------------

### Prefetching Infinite Query with React Suspense

Source: https://suspensive.org/ko/docs/introduction/react-query/usePrefetchInfiniteQuery

This example demonstrates how to use `usePrefetchInfiniteQuery` to prefetch data for an infinite query before a `Suspense` boundary. This ensures data is available when `useSuspenseInfiniteQuery` is called within the suspended component, preventing a loading state.

```javascript
import {
  usePrefetchInfiniteQuery,
  useSuspenseInfiniteQuery,
} from '@suspensive/react-query'

const PostsPage = ({ postId }) => {
  usePrefetchInfiniteQuery({
    queryKey: ['posts'],
    queryFn: () => getPosts(),
  }) // Prefetch query before suspense boundary

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Posts />
    </Suspense>
  )
}

export const Posts = () => {
  const postsInifiniteQuery = useSuspenseInfiniteQuery({
    queryKey: ['posts'],
    queryFn: () => getPosts(),
  })

  return <></>
}
```

--------------------------------

### Using onInView and onInViewEnd Callbacks with InView Component

Source: https://suspensive.org/ko/docs/introduction/react-dom/InView

This example illustrates the usage of `onInView` and `onInViewEnd` props of the `InView` component. It shows how to execute callback functions when an element enters or leaves the viewport, respectively, and how to manage a state array to track currently visible elements.

```typescript
import { InView } from '@suspensive/react-dom'
import { useState } from 'react'

export const Example = () => {
  const [inViewIndexes, setInViewIndexes] = useState([])
  return (
    <>
      {Array.from({ length: 100 }).map((_, index) => (
        <InView
          onInView={() => setInViewIndexes((prev) => [...prev, index])}
          onInViewEnd={() =>
            setInViewIndexes((prev) => prev.filter((i) => i !== index))
          }
        >
          {({ ref, isInView }) => (
            <div
              key={index}
              ref={ref}
              style={{
                backgroundColor: isInView ? 'lightblue' : 'orange',
                border: '1px solid',
                padding: 50,
                textAlign: 'center',
              }}
            >
              {isInView ? 'In View' : 'Out of View'}
            </div>
          )}
        </InView>
      ))}
      <div style={{ position: 'fixed', top: 0, backgroundColor: 'red' }}>
        inViewIndexes: {inViewIndexes.join(', ')}
      </div>
    </>
  )
}
```

--------------------------------

### Integrate Suspensive React Query Switch into Build Script

Source: https://suspensive.org/ko/docs/introduction/react-query/tanstack-query-compatibility

This example shows how to explicitly specify the compatible version using the `suspensive-react-query switch` command within your `package.json` build script. This is useful for fixing the version or ensuring a specific compatibility during the build process.

```json
{
  "scripts": {
    "build": "suspensive-react-query switch 5 && next build"
  }
}
```

--------------------------------

### Migrate from AsyncBoundary to Separate Suspense and ErrorBoundary Components

Source: https://suspensive.org/ko/docs/introduction/react/migration/migrate-to-v2

Provides a migration guide for the removal of `<AsyncBoundary/>` in v2. It shows how to replace `<AsyncBoundary/>` with separate `<Suspense/>` and `<ErrorBoundary/>` components to achieve the same functionality, improving maintainability and interface unification.

```javascript
+ import { Suspense, Errorboundary } from '@suspensive/react'
- import { AsyncBoundary } from '@suspensive/react'

+ <Errorboundary fallback={<Error />} onError={onError} onReset={onReset}>
+   <Suspense fallback={<Loading />}>
+     <Children />
+   </Suspense>
+ </Errorboundary>
- <AsyncBoundary pendingFallback={<Loading />} rejectedFallback={<Error />} onError={onError} onReset={onReset}>
-   <Children />
- </AsyncBoundary>
```

--------------------------------

### Comparison with @tanstack/react-query's useQueries for Suspense

Source: https://suspensive.org/ko/docs/introduction/react-query/useSuspenseQueries

Illustrates the standard `useQueries` hook from `@tanstack/react-query` when used with the `suspense: true` option. This example highlights that even with suspense enabled, `isSuccess` checks are still required for type narrowing, demonstrating the problem that `useSuspenseQueries` aims to solve by providing direct data access.

```typescript
import { useQueries } from '@tanstack/react-query'

const Example = () => {
  const [query1, query2] = useQueries({
    queries: [
      { queryKey: [1], queryFn, suspense: true },
      { queryKey: [2], queryFn, suspense: true },
    ],
  })

  query1.data // TData | undefined
  query2.data // TData | undefined

  if (query1.isSuccess) {
    query.data // TData
  }
  if (query2.isSuccess) {
    query.data // TData
  }
}
```

--------------------------------

### Ensuring Compatibility with Jotai’s Extension Libraries using <AtomValue/>

Source: https://suspensive.org/ko/docs/introduction/jotai/motivation

This example illustrates the compatibility of @suspensive/jotai components, specifically <AtomValue/>, with Jotai's extension libraries. It shows how atoms from libraries like jotai-tanstack-query can be seamlessly integrated, allowing for robust error handling and suspense management.

```javascript
import { AtomValue } from '@suspensive/jotai'
import { Suspense, ErrorBoundary } from '@suspensive/react'
import { UserProfile } from '~/components'
import { userQueryAtom } from '~/queries' {/* Used 'atomWithSuspenseQuery' from 'jotai-tanstack-query'. */}

const MyPage = () => (
  <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
    <Suspense fallback={'pending...'}>
      <AtomValue atom={userQueryAtom}> {/* Atoms from extension libraries are also compatible. */}
        {({ data: user }) => <UserProfile key={user.id} {...user} />}
      </AtomValue>
    </Suspense>
  </ErrorBoundary>
)
```

--------------------------------

### Passing QueryClient Context to QueryClientConsumer (TanStack Query v4)

Source: https://suspensive.org/ko/docs/introduction/react-query/QueryClientConsumer

This example demonstrates how to provide a QueryClient to the <QueryClientConsumer/> component using the 'context' prop, which is required when working with @tanstack/react-query version 4. It leverages React's createContext to define the context for the QueryClient.

```TypeScript
import { createContext } from 'react'
import { QueryClient } from '@tanstack/react-query'
import { QueryClientConsumer } from '@suspensive/react-query'

const queryClient = new QueryClient()
const queryClientContext = createContext<QueryClient>(queryClient)

const Example = () => {
  return (
      {/* 4️⃣ Use props.context if you are working with @tanstack/react-query v4 */}
      <QueryClientConsumer context={queryClientContext}>
        {(queryClient) => (<>{/* Use the QueryClient passed via props.context */}</>)}
      </QueryClientConsumer>
  )
}
```

--------------------------------

### Using AtomValue with a synchronous Jotai atom

Source: https://suspensive.org/ko/docs/introduction/jotai/AtomValue

This example demonstrates the basic usage of the AtomValue component with a synchronous Jotai atom. It shows how to pass a Jotai atom to the `atom` prop and render its value using a render prop pattern.

```javascript
import { AtomValue } from '@suspensive/jotai'
import { atom } from 'jotai'

const countAtom = atom(1)

const Example = () => {
  return (
    <AtomValue atom={countAtom}>{(count) => <>count: {count}</>}</AtomValue>
  )
}
```

--------------------------------

### Example of InView with PrefetchQuery for Data Pre-fetching

Source: https://suspensive.org/ko/docs/introduction/react-dom/InView

This snippet demonstrates how to use the `InView` component from `@suspensive/react-dom` in conjunction with `PrefetchQuery` from `@suspensive/react-query` to prefetch data for elements as they enter the viewport. It highlights the correct approach for prefetching data within a component's render logic, avoiding React hook limitations.

```typescript
import { PrefetchQuery } from '@suspensive/react-query'
import { InView } from '@suspensive/react-dom'

const PostsPage = ({ posts }: { posts: Post[] }) => (
  <div>
    <h1>Posts</h1>
    {posts.map((post) => (
      <InView>
        {({ ref, isInView }) => (
          <div ref={ref}>
            {isInView ? (
              // 🚫 Due to the limitations of React hooks, we cannot use usePrefetchQuery here
              // usePrefetchQuery({
              //   queryKey: ['posts', post.id, 'comments'],
              //   queryFn: () => getPostComments(post.id),
              // })

              // ✅ Before entering the Post Comments page, we can call usePrefetchQuery for each post comments query.
              <PrefetchQuery
                queryKey={['posts', post.id, 'comments']}
                queryFn={() => getPostComments(post.id)}
              />
            ) : null}
            <h2>{post.title}</h2>
            <p>{post.description}</p>
            <Link to={`/posts/${post.id}/comments`}>See comments</Link>
          </div>
        )}
      </InView>
    ))}
  </div>
)
```

--------------------------------

### Check Suspensive React Query Compatibility Status

Source: https://suspensive.org/ko/docs/introduction/react-query/tanstack-query-compatibility

Use this command to check the compatibility status between your installed versions of @tanstack/react-query and @suspensive/react-query. It also lists the interfaces available for use in your current environment, providing a clear overview of what's compatible.

```shell
npx suspensive-react-query status
```

--------------------------------

### Integrate Suspensive React Query Fix into Build Script

Source: https://suspensive.org/ko/docs/introduction/react-query/tanstack-query-compatibility

This example demonstrates how to incorporate the `suspensive-react-query fix` command into your `package.json` build script. This ensures that compatibility issues are automatically resolved every time you build your project, preventing common errors.

```json
{
  "scripts": {
    "build": "suspensive-react-query fix && next build"
  }
}
```

--------------------------------

### UserInfo Component Using useSuspenseQuery for Data Fetching

Source: https://suspensive.org/ko/docs/introduction/react-query/SuspenseQuery

This snippet shows the `UserInfo` component, which internally uses `useSuspenseQuery` to fetch user profile data. The example highlights that the component's name (`UserInfo`) does not convey that it performs data fetching and can trigger a suspense state, requiring a separate component just for this purpose.

```JavaScript
// posts/components/UserInfo.tsx
import { useSuspenseQuery } from '@suspensive/react-query'
import { UserProfile } from '~/components'

// From the perspective of using this component, it is impossible to predict whether Suspense will occur internally just by the name UserInfo.
const UserInfo = ({ userId }) => {
  // We need to create this component just for data-fetching.
  const { data: user } = useSuspenseQuery(userQueryOptions(userId))

  return <UserProfile {...user} />
}
```

--------------------------------

### Prefetching Data with PrefetchQuery Component in React

Source: https://suspensive.org/ko/docs/introduction/react-query/PrefetchQuery

This example demonstrates how to use the `<PrefetchQuery />` component to prefetch data for individual posts' comments. It addresses the limitation of not being able to call `usePrefetchQuery` directly inside a conditional block due to React Hook rules. The component is rendered conditionally based on whether an element is in view, ensuring that comment data is prefetched before a user navigates to the comments page.

```javascript
import { PrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
import { InView } from '@suspensive/react-dom'

const PostsPage = () => {
  const { data: posts } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: () => getPosts(),
  })

  return posts.map((post) => (
    <InView>
      {({ ref, isInView }) => (
        <>
          {isInView ? (
            // 🚫 We can not invoke usePrefetchQuery like below because of React Hook rules
            // usePrefetchQuery({
            //   queryKey: ['posts', post.id, 'comments'],
            //   queryFn: () => getPostComments(post.id),
            // })

            // ✅ We can invoke usePrefetchQuery for each post comments query before entering Post Comments page
            <PrefetchQuery
              queryKey={['posts', post.id, 'comments']}
              queryFn={() => getPostComments(post.id)}
            />
          ) : null}
          <div ref={ref}>
            <h2>{post.title}</h2>
            <p>{post.description}</p>
            <Link to={`/posts/${post.id}/comments`}>See comments</Link>
          </div>
        </>
      )}
    </InView>
  ))
}
```
Tokens:
Raw