diff --git a/src/react/hooks/__tests__/useInteractiveQuery.test.tsx b/src/react/hooks/__tests__/useInteractiveQuery.test.tsx index eed5f14dc4f..26ee98af41f 100644 --- a/src/react/hooks/__tests__/useInteractiveQuery.test.tsx +++ b/src/react/hooks/__tests__/useInteractiveQuery.test.tsx @@ -755,6 +755,156 @@ it("loads a query with variables and suspends by passing variables to the loadQu await expect(ProfiledApp).not.toRerender(); }); +it("can change variables on a query and resuspend by passing new variables to the loadQuery function", async () => { + const user = userEvent.setup(); + const { query, mocks } = useVariablesQueryCase(); + + function SuspenseFallback() { + ProfiledApp.updateSnapshot((snapshot) => ({ + ...snapshot, + suspenseCount: snapshot.suspenseCount + 1, + })); + + return

Loading

; + } + + function Parent() { + const [queryRef, loadQuery] = useInteractiveQuery(query); + + ProfiledApp.updateSnapshot((snapshot) => ({ + ...snapshot, + parentRenderCount: snapshot.parentRenderCount + 1, + })); + + return ( + <> + + + }> + {queryRef && } + + + ); + } + + function Child({ + queryRef, + }: { + queryRef: QueryReference; + }) { + const result = useReadQuery(queryRef); + + ProfiledApp.updateSnapshot((snapshot) => ({ + ...snapshot, + result, + childRenderCount: snapshot.childRenderCount + 1, + })); + + return null; + } + + const ProfiledApp = profile<{ + result: UseReadQueryResult | null; + suspenseCount: number; + parentRenderCount: number; + childRenderCount: number; + }>({ + Component: () => ( + + + + ), + snapshotDOM: true, + initialSnapshot: { + result: null, + suspenseCount: 0, + parentRenderCount: 0, + childRenderCount: 0, + }, + }); + + render(); + + { + const { snapshot } = await ProfiledApp.takeRender(); + + expect(snapshot).toEqual({ + result: null, + suspenseCount: 0, + parentRenderCount: 1, + childRenderCount: 0, + }); + } + + await act(() => user.click(screen.getByText("Load 1st character"))); + + { + const { snapshot, withinDOM } = await ProfiledApp.takeRender(); + + expect(withinDOM().getByText("Loading")).toBeInTheDocument(); + expect(snapshot).toEqual({ + result: null, + suspenseCount: 1, + parentRenderCount: 2, + childRenderCount: 0, + }); + } + + { + const { snapshot } = await ProfiledApp.takeRender(); + + expect(snapshot).toEqual({ + result: { + data: { character: { id: "1", name: "Spider-Man" } }, + networkStatus: NetworkStatus.ready, + error: undefined, + }, + suspenseCount: 1, + parentRenderCount: 2, + childRenderCount: 1, + }); + } + + await act(() => user.click(screen.getByText("Load 2nd character"))); + + { + const { snapshot, withinDOM } = await ProfiledApp.takeRender(); + + expect(withinDOM().getByText("Loading")).toBeInTheDocument(); + expect(snapshot).toEqual({ + result: { + data: { character: { id: "1", name: "Spider-Man" } }, + networkStatus: NetworkStatus.ready, + error: undefined, + }, + suspenseCount: 2, + parentRenderCount: 3, + childRenderCount: 1, + }); + } + + { + const { snapshot } = await ProfiledApp.takeRender(); + + expect(snapshot).toEqual({ + result: { + data: { character: { id: "2", name: "Black Widow" } }, + networkStatus: NetworkStatus.ready, + error: undefined, + }, + suspenseCount: 2, + parentRenderCount: 3, + childRenderCount: 2, + }); + } + + await expect(ProfiledApp).not.toRerender(); +}); + it("allows the client to be overridden", async () => { const user = userEvent.setup(); const { query } = useSimpleQueryCase();