react_ui: ユーザ更新後に詳細画面が古いままなのを修正

Changes

2 changed files (+15/-8)

• packages/react_ui/src/pages/users/:id/edit/page.tsx
  • @@ -6,7 +6,7 @@
    import { type MessageInitShape } from "@bufbuild/protobuf"; import { createClient } from "@connectrpc/connect"; import { Button, Box, Container } from "@radix-ui/themes"; - import { useMutation } from "@tanstack/react-query"; + import { useMutation, useQueryClient } from "@tanstack/react-query"; import { type UpdateUserRequestSchema } from "@yamori/proto/yamori/workspace/v2/update_user_request_pb.js"; import { type User } from "@yamori/proto/yamori/workspace/v2/user_pb.js"; import { WorkspaceService } from "@yamori/proto/yamori/workspace/v2/workspace_service_pb.js";
  • @@ -22,6 +22,7 @@ import { IllegalMessageError } from "../../../../errors/IllegalMessageError.ts";
    import { UserInputError } from "../../../../errors/UserInputError.ts"; import { LoggedInLayout } from "../../../LoggedInLayout.tsx"; + import { userFetchQuery } from "../page.tsx"; import * as details from "../Details.tsx"; export const Title: FC = () => "ユーザ編集";
  • @@ -141,6 +142,7 @@ }
    export const Page: FC<PageProps> = ({ loginUser, user }) => { const navigation = use(NavigationContext); + const client = useQueryClient(); return ( <LoggedInLayout title={<Title />} user={loginUser}>
  • @@ -151,6 +153,7 @@ loginUser={loginUser}
    user={user} onUpdated={() => { navigation.push(details.createHref({ user })); + client.refetchQueries({ queryKey: userFetchQuery(user.id?.value ?? "") }); }} /> ) : (
• packages/react_ui/src/pages/users/:id/page.tsx
  • @@ -5,7 +5,7 @@ import "../../../polyfill.ts";
    import { createClient } from "@connectrpc/connect"; import { Button, Code, Container, Flex, Spinner, Text } from "@radix-ui/themes"; - import { useQuery } from "@tanstack/react-query"; + import { type QueryKey, useQuery } from "@tanstack/react-query"; import { type User } from "@yamori/proto/yamori/workspace/v2/user_pb.js"; import { WorkspaceService } from "@yamori/proto/yamori/workspace/v2/workspace_service_pb.js"; import { type FC } from "react";
  • @@ -45,6 +45,15 @@ </Empty.Root>
    ); }; + export function userFetchQuery(userId: string): QueryKey { + return [ + WorkspaceService.typeName, + WorkspaceService.method.get.name, + import.meta.url, + userId, + ]; + } + interface BodyProps { loginUser: User;
  • @@ -56,12 +65,7 @@ const transport = useConnectTransport();
    const client = createClient(WorkspaceService, transport); const query = useQuery({ - queryKey: [ - WorkspaceService.typeName, - WorkspaceService.method.get.name, - import.meta.url, - userId, - ], + queryKey: userFetchQuery(userId), async queryFn() { const resp = await client.get({}); if (resp.result.case === "ok") {