From b23447f6377ac30a6058b5bff02363f90ffb9e39 Mon Sep 17 00:00:00 2001 From: Jonghyeon Ko Date: Wed, 9 Oct 2024 16:22:46 +0900 Subject: [PATCH] docs(react-query): add docs for usePrefetchInfiniteQuery (#1299) # Overview I added docs for usePrefetchInfiniteQuery and I added @gwansikk @kangju2000 as co-author ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. Co-authored-by: Gwansik Kim <39869096+gwansikk@users.noreply.github.com> Co-authored-by: Juhyeok Kang <23312485+kangju2000@users.noreply.github.com> --- .../src/pages/docs/react-query/_meta.en.json | 5 +- .../src/pages/docs/react-query/_meta.ko.json | 5 +- .../usePrefetchInfiniteQuery.en.mdx | 31 ++++++++ .../usePrefetchInfiniteQuery.ko.mdx | 31 ++++++++ .../docs/react-query/usePrefetchQuery.en.mdx | 77 +++++++------------ .../docs/react-query/usePrefetchQuery.ko.mdx | 77 +++++++------------ 6 files changed, 120 insertions(+), 106 deletions(-) create mode 100644 docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.en.mdx create mode 100644 docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.ko.mdx diff --git a/docs/suspensive.org/src/pages/docs/react-query/_meta.en.json b/docs/suspensive.org/src/pages/docs/react-query/_meta.en.json index 3481d528c..0f385738d 100644 --- a/docs/suspensive.org/src/pages/docs/react-query/_meta.en.json +++ b/docs/suspensive.org/src/pages/docs/react-query/_meta.en.json @@ -7,12 +7,13 @@ "type": "separator", "title": "API Reference" }, + "queryOptions": { "title": "queryOptions" }, + "infiniteQueryOptions": { "title": "infiniteQueryOptions" }, "useSuspenseQuery": { "title": "useSuspenseQuery" }, "useSuspenseQueries": { "title": "useSuspenseQueries" }, "useSuspenseInfiniteQuery": { "title": "useSuspenseInfiniteQuery" }, "usePrefetchQuery": { "title": "usePrefetchQuery" }, - "queryOptions": { "title": "queryOptions" }, - "infiniteQueryOptions": { "title": "infiniteQueryOptions" }, + "usePrefetchInfiniteQuery": { "title": "usePrefetchInfiniteQuery" }, "SuspenseQuery": { "title": "" }, "SuspenseQueries": { "title": "" }, "SuspenseInfiniteQuery": { "title": "" }, diff --git a/docs/suspensive.org/src/pages/docs/react-query/_meta.ko.json b/docs/suspensive.org/src/pages/docs/react-query/_meta.ko.json index 8306f0a00..1eca60b76 100644 --- a/docs/suspensive.org/src/pages/docs/react-query/_meta.ko.json +++ b/docs/suspensive.org/src/pages/docs/react-query/_meta.ko.json @@ -7,12 +7,13 @@ "type": "separator", "title": "API 문서" }, + "queryOptions": { "title": "queryOptions" }, + "infiniteQueryOptions": { "title": "infiniteQueryOptions" }, "useSuspenseQuery": { "title": "useSuspenseQuery" }, "useSuspenseQueries": { "title": "useSuspenseQueries" }, "useSuspenseInfiniteQuery": { "title": "useSuspenseInfiniteQuery" }, "usePrefetchQuery": { "title": "usePrefetchQuery" }, - "queryOptions": { "title": "queryOptions" }, - "infiniteQueryOptions": { "title": "infiniteQueryOptions" }, + "usePrefetchInfiniteQuery": { "title": "usePrefetchInfiniteQuery" }, "SuspenseQuery": { "title": "" }, "SuspenseQueries": { "title": "" }, "SuspenseInfiniteQuery": { "title": "" }, diff --git a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.en.mdx new file mode 100644 index 000000000..5065d45ad --- /dev/null +++ b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.en.mdx @@ -0,0 +1,31 @@ +import { Callout, Sandpack } from '@/components' + +# usePrefetchInfiniteQuery + +The usePrefetchInfiniteQuery does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses useSuspenseInfiniteQuery. + +```jsx /usePrefetchInfiniteQuery/ +import { usePrefetchInfiniteQuery, useSuspenseInfiniteQuery } from '@suspensive/react-query' + +const PostsPage = ({ postId }) => { + usePrefetchInfiniteQuery({ + queryKey: ['posts'], + queryFn: () => getPosts(), + }) // Prefetch query before suspense boundary + + return ( + Loading...}> + + + ) +} + +export const Posts = () => { + const postsInifiniteQuery = useSuspenseInfiniteQuery({ + queryKey: ['posts'], + queryFn: () => getPosts(), + }) + + return <>... +} +``` diff --git a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.ko.mdx new file mode 100644 index 000000000..f7d0c1db3 --- /dev/null +++ b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.ko.mdx @@ -0,0 +1,31 @@ +import { Callout, Sandpack } from '@/components' + +# usePrefetchInfiniteQuery + +usePrefetchInfiniteQuery는 아무것도 반환하지 않으며, useSuspenseInfiniteQuery를 사용하는 컴포넌트를 래핑하는 suspense boundary가 렌더 되기전에 prefetch를 발생시키는 데에 사용합니다. + +```jsx /usePrefetchInfiniteQuery/ +import { usePrefetchInfiniteQuery, useSuspenseInfiniteQuery } from '@suspensive/react-query' + +const PostsPage = ({ postId }) => { + usePrefetchInfiniteQuery({ + queryKey: ['posts'], + queryFn: () => getPosts(), + }) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다 + + return ( + Loading...}> + + + ) +} + +export const Posts = () => { + const postsInifiniteQuery = useSuspenseInfiniteQuery({ + queryKey: ['posts'], + queryFn: () => getPosts(), + }) + + return <>... +} +``` diff --git a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.en.mdx index 389ba924d..7ab6b57c9 100644 --- a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.en.mdx +++ b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.en.mdx @@ -5,10 +5,13 @@ import { Callout, Sandpack } from '@/components' The usePrefetchQuery does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses useSuspenseQuery. ```jsx /usePrefetchQuery/ -import { usePrefetchQuery, queryOptions } from '@suspensive/react-query' +import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query' const PostPage = ({ postId }) => { - usePrefetchQuery(query.post(postId)) // Prefetch query before suspense boundary + usePrefetchQuery({ + queryKey: ['posts', postId], + queryFn: () => getPost(postId), + }) // Prefetch query before suspense boundary return ( Loading...}> @@ -18,22 +21,12 @@ const PostPage = ({ postId }) => { } export const Post = ({ postId }) => { - const { data } = useSuspenseQuery(query.post(postId)) + const { data } = useSuspenseQuery({ + queryKey: ['posts', postId], + queryFn: () => getPost(postId), + }) - return ( -
-

{data.title}

-

{data.body}

-
- ) -} - -const query = { - post: (postId) => - queryOptions({ - queryKey: ['posts', postId], - queryFn: () => getPost(postId), - }), + return <>... } ``` @@ -41,14 +34,15 @@ const query = { ```tsx Example.tsx active import { Suspense } from '@suspensive/react' -import { usePrefetchQuery } from '@suspensive/react-query' -import React from 'react' -import { Post } from './Post' -import { query } from './query' +import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query' +import { useState } from 'react' export const Example = () => { - const [postId, setPostId] = React.useState(1) - usePrefetchQuery(query.post(postId)) + const [postId, setPostId] = useState(1) + usePrefetchQuery({ + queryKey: ['posts', postId], + queryFn:() => getPost(postId), + }) return (
@@ -64,14 +58,12 @@ export const Example = () => {
) } -``` -```tsx Post.tsx -import { useSuspenseQuery } from '@suspensive/react-query' -import { query } from './query' - -export const Post = ({ postId }: { postId: number }) => { - const { data } = useSuspenseQuery(query.post(postId)) +const Post = ({ postId }: { postId: number }) => { + const { data } = useSuspenseQuery({ + queryKey: ['posts', postId], + queryFn:() => getPost(postId), + }) return (
@@ -80,28 +72,11 @@ export const Post = ({ postId }: { postId: number }) => {
) } -``` -```tsx /query.ts -import { queryOptions } from '@suspensive/react-query' - -export const query = { - post: (postId: number) => - queryOptions({ - queryKey: ['posts', postId], - queryFn: async (): Promise<{ - id: number - title: string - body: string - }> => { - const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) - if (!response.ok) { - throw new Error('An error occurred') - } - return await response.json() - } - }) -} +const getPost = (postId: number) => + fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then<{ id: number; title: string; body: string }>( + (res) => res.json() + ) ``` diff --git a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.ko.mdx index 6f81db414..2d230ee61 100644 --- a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.ko.mdx +++ b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.ko.mdx @@ -5,10 +5,13 @@ import { Callout, Sandpack } from '@/components' usePrefetchQuery는 아무것도 반환하지 않으며, useSuspenseQuery를 사용하는 컴포넌트를 래핑하는 suspense boundary가 렌더 되기전에 prefetch를 발생시키는 데에 사용합니다. ```jsx /usePrefetchQuery/ -import { usePrefetchQuery, queryOptions } from '@suspensive/react-query' +import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query' const PostPage = ({ postId }) => { - usePrefetchQuery(query.post(postId)) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다 + usePrefetchQuery({ + queryKey: ['posts', postId], + queryFn: () => getPost(postId), + }) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다 return ( Loading...}> @@ -18,22 +21,12 @@ const PostPage = ({ postId }) => { } export const Post = ({ postId }) => { - const { data } = useSuspenseQuery(query.post(postId)) + const { data } = useSuspenseQuery({ + queryKey: ['posts', postId], + queryFn: () => getPost(postId), + }) - return ( -
-

{data.title}

-

{data.body}

-
- ) -} - -const query = { - post: (postId) => - queryOptions({ - queryKey: ['posts', postId], - queryFn: () => getPost(postId), - }), + return <>... } ``` @@ -41,14 +34,15 @@ const query = { ```tsx Example.tsx active import { Suspense } from '@suspensive/react' -import { usePrefetchQuery } from '@suspensive/react-query' -import React from 'react' -import { Post } from './Post' -import { query } from './query' +import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query' +import { useState } from 'react' export const Example = () => { - const [postId, setPostId] = React.useState(1) - usePrefetchQuery(query.post(postId)) + const [postId, setPostId] = useState(1) + usePrefetchQuery({ + queryKey: ['posts', postId], + queryFn:() => getPost(postId), + }) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다 return (
@@ -64,14 +58,12 @@ export const Example = () => {
) } -``` -```tsx Post.tsx -import { useSuspenseQuery } from '@suspensive/react-query' -import { query } from './query' - -export const Post = ({ postId }: { postId: number }) => { - const { data } = useSuspenseQuery(query.post(postId)) +const Post = ({ postId }: { postId: number }) => { + const { data } = useSuspenseQuery({ + queryKey: ['posts', postId], + queryFn:() => getPost(postId), + }) return (
@@ -80,28 +72,11 @@ export const Post = ({ postId }: { postId: number }) => {
) } -``` -```tsx /query.ts -import { queryOptions } from '@suspensive/react-query' - -export const query = { - post: (postId: number) => - queryOptions({ - queryKey: ['posts', postId], - queryFn: async (): Promise<{ - id: number - title: string - body: string - }> => { - const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) - if (!response.ok) { - throw new Error('An error occurred') - } - return await response.json() - } - }) -} +const getPost = (postId: number) => + fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then<{ id: number; title: string; body: string }>( + (res) => res.json() + ) ```