Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changed return type of useMutation when ignoreResult is explicitly set to true to hide unset result #12277

Closed
wants to merge 2 commits into from
Closed

Changed return type of useMutation when ignoreResult is explicitly set to true to hide unset result #12277

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac38202
Changed return type of useMutation when ignoreResult is explicitly se…
Cellule Jan 15, 2025
185c889
More thorough test
Cellule Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tasty-steaks-think.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@apollo/client": patch
---

Changed return type of useMutation when ignoreResult is explicitly set to true to avoid using unset values of the result
60 changes: 59 additions & 1 deletion src/react/hooks/__tests__/useMutation.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import {
createRenderStream,
renderHookToSnapshotStream,
} from "@testing-library/react-render-stream";
import { MutationTuple, QueryResult } from "../../types/types";
import { MutationResult, MutationTuple, QueryResult } from "../../types/types";
import { invariant } from "../../../utilities/globals";

describe("useMutation Hook", () => {
Expand Down Expand Up @@ -3389,4 +3389,62 @@ describe.skip("Type Tests", () => {
expectTypeOf(data).toMatchTypeOf<Mutation | null | undefined>();
expectTypeOf(mutate()).toMatchTypeOf<Promise<FetchResult<Mutation>>>();
});

test("should not be able to access result when using ignoreResults", async () => {
const mutation = gql`
mutation {
updateUser {
id
}
}
`;

type Mutation = {
updateUser: {
__typename: "User";
id: string;
};
};

// Explicit `true`
{
const [mutate, result] = useMutation<Mutation>(mutation, {
ignoreResults: true,
});
expectTypeOf(result).toMatchTypeOf<{ reset: () => void }>();
expectTypeOf(result).not.toMatchTypeOf<MutationResult<Mutation>>();
expectTypeOf(mutate()).toMatchTypeOf<Promise<FetchResult<Mutation>>>();
const {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you update this to check client and called as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, I rewrote it a bit, the destructuring was not needed and made the test longer than needed

reset,
// @ts-expect-error
data,
// @ts-expect-error
loading,
// @ts-expect-error
error,
} = result;
reset;
data;
loading;
error;
}

// Explicit `false`
{
const [mutate, result] = useMutation<Mutation>(mutation, {
ignoreResults: false,
});
expectTypeOf(result).toMatchTypeOf<MutationResult<Mutation>>();
expectTypeOf(mutate()).toMatchTypeOf<Promise<FetchResult<Mutation>>>();
}

// Unknown boolean
{
const [mutate, result] = useMutation<Mutation>(mutation, {
ignoreResults: Math.random() > 0.5,
});
expectTypeOf(result).toMatchTypeOf<MutationResult<Mutation>>();
expectTypeOf(mutate()).toMatchTypeOf<Promise<FetchResult<Mutation>>>();
}
});
});
33 changes: 33 additions & 0 deletions src/react/hooks/useMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from "rehackt";
import type { DocumentNode } from "graphql";
import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
import type {
MutationFunction,
MutationFunctionOptions,
MutationHookOptions,
MutationResult,
Expand Down Expand Up @@ -69,6 +70,38 @@ import { useIsomorphicLayoutEffect } from "./internal/useIsomorphicLayoutEffect.
* @param options - Options to control how the mutation is executed.
* @returns A tuple in the form of `[mutate, result]`
*/
export function useMutation<
TData = any,
TVariables = OperationVariables,
TContext = DefaultContext,
TCache extends ApolloCache<any> = ApolloCache<any>,
>(
mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,
options: { ignoreResults: true } & MutationHookOptions<
NoInfer<TData>,
NoInfer<TVariables>,
TContext,
TCache
>
): [
MutationFunction<TData, TVariables, TContext, TCache>,
// result is not reliable when ignoreResults is true
Pick<MutationResult<TData>, "reset">,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we still return loading, called, and client properties even when ignoreResults are set. They just happen to use their initial values:

apollo-client/src/react/hooks/useMutation.ts

Lines 88 to 92 in eeb5f3c

const [result, setResult] = React.useState<Omit<MutationResult, "reset">>({
called: false,
loading: false,
client,
});

Can we include those properties here as well? I see no reason not to be able to access them, even if loading or called never changes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The biggest problem I've seen is that while the properties are there at runtime, their value is always unset.
Trying to use them is almost sure to be a bug.

In my opinion, I feel that at runtime the unreliable fields should not be returned, but that would be breaking change and I wasn't keen on going down that route.
Even changing the type has the potential to cause typescript errors after update, but it should in theory find potential bugs in the code.

I see that client is potentially correct IF not provided when calling the mutation

Now that I review it a bit more, I now notice that in the catch case it'll actually set the result to have an error
But if the mutation is called another time and succeeds, the error won't be cleared in the result making it even more unreliable

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've got a planning meeting tomorrow so let me take this to the team and get their thoughts on this.

];
export function useMutation<
TData = any,
TVariables = OperationVariables,
TContext = DefaultContext,
TCache extends ApolloCache<any> = ApolloCache<any>,
>(
mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,
options?: MutationHookOptions<
NoInfer<TData>,
NoInfer<TVariables>,
TContext,
TCache
>
): MutationTuple<TData, TVariables, TContext, TCache>;
export function useMutation<
TData = any,
TVariables = OperationVariables,
Expand Down
8 changes: 3 additions & 5 deletions src/react/types/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,6 +394,8 @@ export declare type MutationFunction<
TCache extends ApolloCache<any> = ApolloCache<any>,
> = (
options?: MutationFunctionOptions<TData, TVariables, TContext, TCache>
// TODO This FetchResult<TData> seems strange here, as opposed to an
// ApolloQueryResult<TData>
) => Promise<FetchResult<MaybeMasked<TData>>>;

export interface MutationHookOptions<
Expand All @@ -418,11 +420,7 @@ export type MutationTuple<
TContext = DefaultContext,
TCache extends ApolloCache<any> = ApolloCache<any>,
> = [
mutate: (
options?: MutationFunctionOptions<TData, TVariables, TContext, TCache>
// TODO This FetchResult<TData> seems strange here, as opposed to an
// ApolloQueryResult<TData>
) => Promise<FetchResult<MaybeMasked<TData>>>,
mutate: MutationFunction<TData, TVariables, TContext, TCache>,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 I have no idea why this wasn't that way to begin with. Good find!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hahah yeah, I went down the route of making a new type... only to realize it already existed 😅

result: MutationResult<TData>,
];

Expand Down