From 3f6fe7a437e4f8cdc90b296915cc6b99e6848296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaeuk=20Lim=28=EC=9E=84=EC=9E=AC=EC=9A=B1=29?= Date: Sat, 2 Aug 2025 17:48:30 +0900 Subject: [PATCH 1/3] feat: change optimisticUpdatesFn to getOptimisticState --- docs/en/installation.md | 2 +- docs/en/react/useOptimisticMutation.md | 4 ++-- src/react/__tests__/useOptimisticMutation.test.tsx | 10 +++++----- src/react/useOptimisticMutation/types.ts | 13 +------------ .../useOptimisticMutation/useOptimisticMutation.ts | 4 ++-- 5 files changed, 11 insertions(+), 22 deletions(-) diff --git a/docs/en/installation.md b/docs/en/installation.md index 16c2e49..033b291 100644 --- a/docs/en/installation.md +++ b/docs/en/installation.md @@ -34,7 +34,7 @@ function Page() { mutationFn: () => Promise.resolve(), optimisticUpdateOptions: { queryKey: ["todos"], - optimisticUpdatesFn: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { + getOptimisticState: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { return [...prevQueryData, variables]; }, invalidateQueryOnSuccess: true diff --git a/docs/en/react/useOptimisticMutation.md b/docs/en/react/useOptimisticMutation.md index d3d4df1..5a39393 100644 --- a/docs/en/react/useOptimisticMutation.md +++ b/docs/en/react/useOptimisticMutation.md @@ -21,7 +21,7 @@ const { mutationFn: addTodo, optimisticUpdateOptions: { queryKey: ["todos"], - optimisticUpdatesFn: ({ prevQueryData, variables }) => { + getOptimisticState: ({ prevQueryData, variables }) => { return [...prevQueryData, variables]; }, invalidateQueryOnSuccess: true @@ -43,7 +43,7 @@ This parameter extends the original UseMutationOptions. All original options are - Defaults to `false` - Whether to invalidate the query after a successful mutation - If set to `true`, the query will fetch if the data is stale. - - `optimisticUpdatesFn: { prevQueryData: TQueryData; variables: TVariables }) => TQueryData;` + - `getOptimisticState: { prevQueryData: TQueryData; variables: TVariables }) => TQueryData;` - This function returns the state for optimistic updates. ## queryClient diff --git a/src/react/__tests__/useOptimisticMutation.test.tsx b/src/react/__tests__/useOptimisticMutation.test.tsx index 591af49..b1593ea 100644 --- a/src/react/__tests__/useOptimisticMutation.test.tsx +++ b/src/react/__tests__/useOptimisticMutation.test.tsx @@ -36,7 +36,7 @@ describe("useOptimisticMutation", () => { mutationFn: () => Promise.resolve(), optimisticUpdateOptions: { queryKey: MOCK_QUERY_DATA.todo.queryKey, - optimisticUpdatesFn: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { + getOptimisticState: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { return [...prevQueryData, variables]; } } @@ -68,7 +68,7 @@ describe("useOptimisticMutation", () => { mutationFn: () => Promise.reject(), optimisticUpdateOptions: { queryKey: MOCK_QUERY_DATA.todo.queryKey, - optimisticUpdatesFn: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { + getOptimisticState: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { return [...prevQueryData, variables]; } } @@ -114,7 +114,7 @@ describe("useOptimisticMutation", () => { mutationFn: () => Promise.resolve(), optimisticUpdateOptions: { queryKey: MOCK_QUERY_DATA.todo.queryKey, - optimisticUpdatesFn: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { + getOptimisticState: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { return [...prevQueryData, variables]; }, invalidateQueryOnSuccess: true @@ -154,7 +154,7 @@ describe("useOptimisticMutation", () => { mutationFn: () => Promise.resolve(), optimisticUpdateOptions: { queryKey: MOCK_QUERY_DATA.todo.queryKey, - optimisticUpdatesFn: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { + getOptimisticState: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { return [...prevQueryData, variables]; }, invalidateQueryOnSuccess: () => { @@ -194,7 +194,7 @@ describe("useOptimisticMutation", () => { mutationFn: () => Promise.resolve(), optimisticUpdateOptions: { queryKey: MOCK_QUERY_DATA.todo.queryKey, - optimisticUpdatesFn: updateFnMock + getOptimisticState: updateFnMock } }); diff --git a/src/react/useOptimisticMutation/types.ts b/src/react/useOptimisticMutation/types.ts index fccaab8..649ade9 100644 --- a/src/react/useOptimisticMutation/types.ts +++ b/src/react/useOptimisticMutation/types.ts @@ -1,20 +1,9 @@ import { QueryKey } from "@tanstack/react-query"; export type OptimisticUpdateOptions = { - /** - * A query key for optimistic update - */ queryKey: QueryKey; - /** - * A function returns the resulting optimistic state. - */ - optimisticUpdatesFn: (param: { prevQueryData: TQueryData; variables: TVariables }) => TQueryData; - /** - * If set to `true`, the query will fetch if the data is stale. - * - * @default false - */ invalidateQueryOnSuccess?: boolean | (() => boolean); + getOptimisticState: (param: { prevQueryData: TQueryData; variables: TVariables }) => TQueryData; }; export type OptimisticUpdateContext = { diff --git a/src/react/useOptimisticMutation/useOptimisticMutation.ts b/src/react/useOptimisticMutation/useOptimisticMutation.ts index 4030fb8..1cd8bb3 100644 --- a/src/react/useOptimisticMutation/useOptimisticMutation.ts +++ b/src/react/useOptimisticMutation/useOptimisticMutation.ts @@ -20,7 +20,7 @@ export function useOptimisticMutation( @@ -35,7 +35,7 @@ export function useOptimisticMutation Date: Sat, 2 Aug 2025 17:49:36 +0900 Subject: [PATCH 2/3] docs: remove changed api --- docs/en/installation.md | 2 +- docs/en/react/useOptimisticMutation.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/en/installation.md b/docs/en/installation.md index 033b291..16c2e49 100644 --- a/docs/en/installation.md +++ b/docs/en/installation.md @@ -34,7 +34,7 @@ function Page() { mutationFn: () => Promise.resolve(), optimisticUpdateOptions: { queryKey: ["todos"], - getOptimisticState: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { + optimisticUpdatesFn: ({ prevQueryData, variables }: { prevQueryData: Todo[]; variables: Todo }) => { return [...prevQueryData, variables]; }, invalidateQueryOnSuccess: true diff --git a/docs/en/react/useOptimisticMutation.md b/docs/en/react/useOptimisticMutation.md index 5a39393..d3d4df1 100644 --- a/docs/en/react/useOptimisticMutation.md +++ b/docs/en/react/useOptimisticMutation.md @@ -21,7 +21,7 @@ const { mutationFn: addTodo, optimisticUpdateOptions: { queryKey: ["todos"], - getOptimisticState: ({ prevQueryData, variables }) => { + optimisticUpdatesFn: ({ prevQueryData, variables }) => { return [...prevQueryData, variables]; }, invalidateQueryOnSuccess: true @@ -43,7 +43,7 @@ This parameter extends the original UseMutationOptions. All original options are - Defaults to `false` - Whether to invalidate the query after a successful mutation - If set to `true`, the query will fetch if the data is stale. - - `getOptimisticState: { prevQueryData: TQueryData; variables: TVariables }) => TQueryData;` + - `optimisticUpdatesFn: { prevQueryData: TQueryData; variables: TVariables }) => TQueryData;` - This function returns the state for optimistic updates. ## queryClient From 56ea61b1e03472d5178f71c192baf2e00d30e35b Mon Sep 17 00:00:00 2001 From: Jaeuk Lim Date: Sat, 2 Aug 2025 17:52:23 +0900 Subject: [PATCH 3/3] Create metal-bottles-swim.md --- .changeset/metal-bottles-swim.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/metal-bottles-swim.md diff --git a/.changeset/metal-bottles-swim.md b/.changeset/metal-bottles-swim.md new file mode 100644 index 0000000..2d01ab9 --- /dev/null +++ b/.changeset/metal-bottles-swim.md @@ -0,0 +1,5 @@ +--- +"tanstack-query-optimistic-updates": patch +--- + +- [PR](https://github.com/mugglim/tanstack-query-optimistic-updates/pull/9)