Skip to content

Commit

Permalink
fix(client:mutation): fix SWR Mutation argument update on latest version
Browse files Browse the repository at this point in the history 
Mutation generic argument changed location of Key and ExtraArg causing the input of trigger fn to be
the path i.e "recipes.complete" instead of the data.

BREAKING CHANGE: Breaking change, this patch requires the lastest SWR version `2.2.0` in order to
work. Peer dependencies are updated

fix: #46
  • Loading branch information
@sannajammeh
sannajammeh committed Jun 24, 2023
1 parent 3ddbf93 commit 86e2643
Show file tree
Hide file tree
Showing 3 changed files with 399 additions and 392 deletions.
221 changes: 111 additions & 110 deletions apps/demo/src/pages/simple-mutation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,119 +10,120 @@ import { useState } from "react";
import useSWRImmutable from "swr/immutable";

const MutationCard = ({
throwError,
setThrowError,
}: { throwError: boolean; setThrowError: (value: boolean) => void }) => {
const { query } = useRouter();
const { client } = api.useContext();
const {
data: user,
isMutating,
trigger,
error,
reset,
} = api.users.create.useSWRMutation({
throwOnError: false,
});

const { data: hasReset } = useSWRImmutable("reset", () => {
return client.users.reset.mutate();
});

const handleReset = async () => {
await client.users.reset.mutate();
reset();
};

if (!hasReset) {
return <Card>Waiting for reset...</Card>;
}

if (isMutating)
return (
<Card>
<div>
<span data-testid="loading">Loading...</span>
</div>
</Card>
);

return (
<>
<Card
data-testid="mutation-card"
data-test-state={user ? "user-created" : error ? "user-error" : "empty"}
>
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
Create user
</h3>
<div className="flex items-center gap-4 mt-4">
<Button
size="sm"
onClick={() =>
hasReset &&
trigger({
name: (query.name as string) || "John Doe",
throwError,
})
}
>
Create User
</Button>
<Button onClick={handleReset} size="sm" color="secondary">
Reset
</Button>

<div className="flex items-center gap-1">
<Checkbox
id="throw-error"
checked={throwError}
onCheckedChange={setThrowError}
name="throwError"
/>
<Label htmlFor="throw-error">Throw error?</Label>
</div>
</div>
</Card>
{user && (
<>
<Card>
<User
data-testid="user"
key={user.id}
src={`https://api.dicebear.com/6.x/initials/svg?seed=${user.name}`}
name={<span data-testid="user-name">{user.name}</span>}
description={`ID: ${user.id}`}
squared
/>
</Card>
</>
)}

{error && (
<>
<Card>
<h4>Error</h4>
<pre data-testid="error-message">{error.message}</pre>
</Card>
</>
)}
</>
);
throwError,
setThrowError,
}: {
throwError: boolean;
setThrowError: (value: boolean) => void;
}) => {
const { query } = useRouter();
const { client } = api.useContext();
const {
data: user,
isMutating,
trigger,
error,
reset,
} = api.users.create.useSWRMutation();

const { data: hasReset } = useSWRImmutable("reset", () => {
return client.users.reset.mutate();
});

const handleReset = async () => {
await client.users.reset.mutate();
reset();
};

if (!hasReset) {
return <Card>Waiting for reset...</Card>;
}

if (isMutating)
return (
<Card>
<div>
<span data-testid="loading">Loading...</span>
</div>
</Card>
);

return (
<>
<Card
data-testid="mutation-card"
data-test-state={user ? "user-created" : error ? "user-error" : "empty"}
>
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
Create user
</h3>
<div className="flex items-center gap-4 mt-4">
<Button
size="sm"
onClick={() =>
hasReset &&
trigger({
name: (query.name as string) || "John Doe",
throwError,
})
}
>
Create User
</Button>
<Button onClick={handleReset} size="sm" color="secondary">
Reset
</Button>

<div className="flex items-center gap-1">
<Checkbox
id="throw-error"
checked={throwError}
onCheckedChange={setThrowError}
name="throwError"
/>
<Label htmlFor="throw-error">Throw error?</Label>
</div>
</div>
</Card>
{user && (
<>
<Card>
<User
data-testid="user"
key={user.id}
src={`https://api.dicebear.com/6.x/initials/svg?seed=${user.name}`}
name={<span data-testid="user-name">{user.name}</span>}
description={`ID: ${user.id}`}
squared
/>
</Card>
</>
)}

{error && (
<>
<Card>
<h4>Error</h4>
<pre data-testid="error-message">{error.message}</pre>
</Card>
</>
)}
</>
);
};

const SimpleMutation = () => {
const [throwError, setThrowError] = useState(false);

return (
<>
<MutationCard {...{ throwError, setThrowError }} />
<Card>
<h4>Code</h4>
<Code lang="tsx">{throwError ? handleErrorsCode : codePreview}</Code>
</Card>
</>
);
const [throwError, setThrowError] = useState(false);

return (
<>
<MutationCard {...{ throwError, setThrowError }} />
<Card>
<h4>Code</h4>
<Code lang="tsx">{throwError ? handleErrorsCode : codePreview}</Code>
</Card>
</>
);
};

export default SimpleMutation;
Expand Down
Loading

1 comment on commit 86e2643

@vercel
Copy link

@vercel vercel bot commented on 86e2643 Jun 24, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

trpc-swr – ./

trpc-swr.vercel.app
trpc-swr-sannajammeh.vercel.app
trpc-swr-git-main-sannajammeh.vercel.app

Please sign in to comment.