From 0bac782bd027ba75c6754a200704ba7ffa6eb463 Mon Sep 17 00:00:00 2001
From: neo773 <62795688+neo773@users.noreply.github.com>
Date: Thu, 24 Nov 2022 02:34:09 +0530
Subject: [PATCH] port react tests to v10 (#3239)

---
 packages/tests/server/react/__testHelpers.tsx | 251 +++++++++++
 .../tests/server/react/dehydrate.test.tsx     |  46 ++
 .../tests/server/react/formatError.test.tsx   |  66 +++
 .../tests/server/react/infiniteQuery.test.tsx | 397 ++++++++++++++++++
 .../server/react/invalidateQueries.test.tsx   | 234 +++++++++++
 .../tests/server/react/prefetchQuery.test.tsx |  55 +++
 .../issue-1645-setErrorStatusSSR.test.tsx     |  67 +++
 .../react/setInfiniteQueryData.test.tsx       | 113 +++++
 .../tests/server/react/setQueryData.test.tsx  |  91 ++++
 9 files changed, 1320 insertions(+)
 create mode 100644 packages/tests/server/react/__testHelpers.tsx
 create mode 100644 packages/tests/server/react/dehydrate.test.tsx
 create mode 100644 packages/tests/server/react/formatError.test.tsx
 create mode 100644 packages/tests/server/react/infiniteQuery.test.tsx
 create mode 100644 packages/tests/server/react/invalidateQueries.test.tsx
 create mode 100644 packages/tests/server/react/prefetchQuery.test.tsx
 create mode 100644 packages/tests/server/react/regression/issue-1645-setErrorStatusSSR.test.tsx
 create mode 100644 packages/tests/server/react/setInfiniteQueryData.test.tsx
 create mode 100644 packages/tests/server/react/setQueryData.test.tsx

diff --git a/packages/tests/server/react/__testHelpers.tsx b/packages/tests/server/react/__testHelpers.tsx
new file mode 100644
index 00000000000..09f52b095a0
--- /dev/null
+++ b/packages/tests/server/react/__testHelpers.tsx
@@ -0,0 +1,251 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { routerToServerAndClientNew } from '../___testHelpers';
+import { createQueryClient, createQueryClientConfig } from '../__queryClient';
+import { QueryClientProvider } from '@tanstack/react-query';
+import {
+  TRPCWebSocketClient,
+  createWSClient,
+  httpBatchLink,
+  splitLink,
+  wsLink,
+} from '@trpc/client';
+import { createTRPCReact } from '@trpc/react-query';
+import { OutputWithCursor } from '@trpc/react-query/src/shared/hooks/createHooksInternal';
+import { TRPCError, initTRPC } from '@trpc/server';
+import { observable } from '@trpc/server/src/observable';
+import { subscriptionPullFactory } from '@trpc/server/src/subscription';
+import hash from 'hash-sum';
+import React, { ReactNode } from 'react';
+import { ZodError, z } from 'zod';
+
+export type Post = {
+  id: string;
+  title: string;
+  createdAt: number;
+};
+
+export function createAppRouter() {
+  const db: {
+    posts: Post[];
+  } = {
+    posts: [
+      { id: '1', title: 'first post', createdAt: 0 },
+      { id: '2', title: 'second post', createdAt: 1 },
+    ],
+  };
+  const postLiveInputs: unknown[] = [];
+  const createContext = jest.fn(() => ({}));
+  const allPosts = jest.fn();
+  const postById = jest.fn();
+  let wsClient: TRPCWebSocketClient = null as any;
+
+  const t = initTRPC.create({
+    errorFormatter({ shape, error }) {
+      return {
+        $test: 'formatted',
+        zodError:
+          error.cause instanceof ZodError ? error.cause.flatten() : null,
+        ...shape,
+      };
+    },
+  });
+
+  let count = 0;
+  const appRouter = t.router({
+    count: t.procedure.input(z.string()).query(({ input }) => {
+      return `${input}:${count++}`;
+    }),
+    allPosts: t.procedure.query(({}) => {
+      allPosts();
+      return db.posts;
+    }),
+    postById: t.procedure.input(z.string()).query(({ input }) => {
+      postById(input);
+      const post = db.posts.find((p) => p.id === input);
+      if (!post) {
+        throw new TRPCError({ code: 'NOT_FOUND' });
+      }
+      return post;
+    }),
+    paginatedPosts: t.procedure
+      .input(
+        z.object({
+          limit: z.number().min(1).max(100).nullish(),
+          cursor: z.number().nullish(),
+        }),
+      )
+      .query(({ input }) => {
+        const items: typeof db.posts = [];
+        const limit = input.limit ?? 50;
+        const { cursor } = input;
+        let nextCursor: typeof cursor = null;
+        for (let index = 0; index < db.posts.length; index++) {
+          const element = db.posts[index]!;
+          if (cursor != null && element!.createdAt < cursor) {
+            continue;
+          }
+          items.push(element);
+          if (items.length >= limit) {
+            break;
+          }
+        }
+        const last = items[items.length - 1];
+        const nextIndex = db.posts.findIndex((item) => item === last) + 1;
+        if (db.posts[nextIndex]) {
+          nextCursor = db.posts[nextIndex]!.createdAt;
+        }
+        return {
+          items,
+          nextCursor,
+        };
+      }),
+
+    addPost: t.procedure
+      .input(
+        z.object({
+          title: z.string(),
+        }),
+      )
+      .mutation(({ input }) => {
+        db.posts.push({
+          id: `${Math.random()}`,
+          createdAt: Date.now(),
+          title: input.title,
+        });
+      }),
+
+    deletePosts: t.procedure
+      .input(z.array(z.string()).nullish())
+      .mutation(({ input }) => {
+        if (input) {
+          db.posts = db.posts.filter((p) => !input.includes(p.id));
+        } else {
+          db.posts = [];
+        }
+      }),
+
+    PING: t.procedure.mutation(({}) => {
+      return 'PONG' as const;
+    }),
+
+    newPosts: t.procedure.input(z.number()).subscription(({ input }) => {
+      return subscriptionPullFactory<Post>({
+        intervalMs: 1,
+        pull(emit) {
+          db.posts.filter((p) => p.createdAt > input).forEach(emit.next);
+        },
+      });
+    }),
+
+    postsLive: t.procedure
+      .input(
+        z.object({
+          cursor: z.string().nullable(),
+        }),
+      )
+      .subscription(({ input }) => {
+        const { cursor } = input;
+        postLiveInputs.push(input);
+
+        return subscriptionPullFactory<OutputWithCursor<Post[]>>({
+          intervalMs: 10,
+          pull(emit) {
+            const newCursor = hash(db.posts);
+            if (newCursor !== cursor) {
+              emit.next({ data: db.posts, cursor: newCursor });
+            }
+          },
+        });
+      }),
+  });
+
+  const linkSpy = {
+    up: jest.fn(),
+    down: jest.fn(),
+  };
+  const { client, trpcClientOptions, close } = routerToServerAndClientNew(
+    appRouter,
+    {
+      server: {
+        createContext,
+        batching: {
+          enabled: true,
+        },
+      },
+      client({ httpUrl, wssUrl }) {
+        wsClient = createWSClient({
+          url: wssUrl,
+        });
+        return {
+          links: [
+            () =>
+              ({ op, next }) => {
+                return observable((observer) => {
+                  linkSpy.up(op);
+                  const subscription = next(op).subscribe({
+                    next(result) {
+                      linkSpy.down(result);
+                      observer.next(result);
+                    },
+                    error(result) {
+                      linkSpy.down(result);
+                      observer.error(result);
+                    },
+                    complete() {
+                      linkSpy.down('COMPLETE');
+                      observer.complete();
+                    },
+                  });
+                  return subscription;
+                });
+              },
+            splitLink({
+              condition(op) {
+                return op.type === 'subscription';
+              },
+              true: wsLink({
+                client: wsClient,
+              }),
+              false: httpBatchLink({
+                url: httpUrl,
+              }),
+            }),
+          ],
+        };
+      },
+    },
+  );
+
+  trpcClientOptions.queryClientConfig = createQueryClientConfig(
+    trpcClientOptions.queryClientConfig,
+  );
+  const queryClient = createQueryClient(trpcClientOptions.queryClientConfig);
+  const trpc = createTRPCReact<typeof appRouter>();
+
+  function App(props: { children: ReactNode }) {
+    return (
+      <trpc.Provider {...{ queryClient, client }}>
+        <QueryClientProvider client={queryClient}>
+          {props.children}
+        </QueryClientProvider>
+      </trpc.Provider>
+    );
+  }
+  return {
+    App,
+    appRouter,
+    trpc,
+    close,
+    db,
+    client,
+    trpcClientOptions,
+    postLiveInputs,
+    resolvers: {
+      postById,
+      allPosts,
+    },
+    queryClient,
+    createContext,
+    linkSpy,
+  };
+}
diff --git a/packages/tests/server/react/dehydrate.test.tsx b/packages/tests/server/react/dehydrate.test.tsx
new file mode 100644
index 00000000000..cff64b4cd4a
--- /dev/null
+++ b/packages/tests/server/react/dehydrate.test.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { createAppRouter } from './__testHelpers';
+import '@testing-library/jest-dom';
+import { createProxySSGHelpers } from '@trpc/react-query/src/ssg';
+
+let factory: ReturnType<typeof createAppRouter>;
+beforeEach(() => {
+  factory = createAppRouter();
+});
+afterEach(() => {
+  factory.close();
+});
+
+test('dehydrate', async () => {
+  const { db, appRouter } = factory;
+  const ssg = createProxySSGHelpers({ router: appRouter, ctx: {} });
+
+  await ssg.allPosts.prefetch();
+  await ssg.postById.prefetch('1');
+
+  const dehydrated = ssg.dehydrate().queries;
+  expect(dehydrated).toHaveLength(2);
+
+  const [cache, cache2] = dehydrated;
+  expect(cache!.queryHash).toMatchInlineSnapshot(
+    `"[[\\"allPosts\\"],{\\"type\\":\\"query\\"}]"`,
+  );
+  expect(cache!.queryKey).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "allPosts",
+      ],
+      Object {
+        "type": "query",
+      },
+    ]
+  `);
+  expect(cache!.state.data).toEqual(db.posts);
+  expect(cache2!.state.data).toMatchInlineSnapshot(`
+    Object {
+      "createdAt": 0,
+      "id": "1",
+      "title": "first post",
+    }
+  `);
+});
diff --git a/packages/tests/server/react/formatError.test.tsx b/packages/tests/server/react/formatError.test.tsx
new file mode 100644
index 00000000000..c60d69cb963
--- /dev/null
+++ b/packages/tests/server/react/formatError.test.tsx
@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { createQueryClient } from '../__queryClient';
+import { createAppRouter } from './__testHelpers';
+import { QueryClientProvider } from '@tanstack/react-query';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import { DefaultErrorShape } from '@trpc/server/src/error/formatter';
+import { expectTypeOf } from 'expect-type';
+import React, { useEffect, useState } from 'react';
+
+let factory: ReturnType<typeof createAppRouter>;
+beforeEach(() => {
+  factory = createAppRouter();
+});
+afterEach(() => {
+  factory.close();
+});
+
+test('react types test', async () => {
+  const { trpc, client } = factory;
+  function MyComponent() {
+    const mutation = trpc.addPost.useMutation();
+
+    useEffect(() => {
+      mutation.mutate({ title: 123 as any });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (mutation.error && mutation.error && mutation.error.shape) {
+      expectTypeOf(mutation.error.shape).toMatchTypeOf<
+        DefaultErrorShape & {
+          $test: string;
+        }
+      >();
+      expectTypeOf(mutation.error.shape).toMatchTypeOf<
+        DefaultErrorShape & {
+          $test: string;
+        }
+      >();
+      return (
+        <pre data-testid="err">
+          {JSON.stringify(mutation.error.shape.zodError, null, 2)}
+        </pre>
+      );
+    }
+    return <></>;
+  }
+  function App() {
+    const [queryClient] = useState(() => createQueryClient());
+    return (
+      <trpc.Provider {...{ queryClient, client }}>
+        <QueryClientProvider client={queryClient}>
+          <MyComponent />
+        </QueryClientProvider>
+      </trpc.Provider>
+    );
+  }
+
+  const utils = render(<App />);
+  await waitFor(() => {
+    expect(utils.container).toHaveTextContent('fieldErrors');
+    expect(utils.getByTestId('err').innerText).toMatchInlineSnapshot(
+      `undefined`,
+    );
+  });
+});
diff --git a/packages/tests/server/react/infiniteQuery.test.tsx b/packages/tests/server/react/infiniteQuery.test.tsx
new file mode 100644
index 00000000000..1886bc0ce50
--- /dev/null
+++ b/packages/tests/server/react/infiniteQuery.test.tsx
@@ -0,0 +1,397 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { createQueryClient } from '../__queryClient';
+import { Post, createAppRouter } from './__testHelpers';
+import { QueryClientProvider } from '@tanstack/react-query';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createProxySSGHelpers } from '@trpc/react-query/src/ssg';
+import { expectTypeOf } from 'expect-type';
+import React, { Fragment, useState } from 'react';
+
+let factory: ReturnType<typeof createAppRouter>;
+beforeEach(() => {
+  factory = createAppRouter();
+});
+afterEach(() => {
+  factory.close();
+});
+
+describe('Infinite Query', () => {
+  test('useInfiniteQuery()', async () => {
+    const { trpc, client } = factory;
+
+    function MyComponent() {
+      const q = trpc.paginatedPosts.useInfiniteQuery(
+        {
+          limit: 1,
+        },
+        {
+          getNextPageParam: (lastPage) => lastPage.nextCursor,
+        },
+      );
+
+      expectTypeOf(q.data?.pages[0]!.items).toMatchTypeOf<undefined | Post[]>();
+
+      return q.status === 'loading' ? (
+        <p>Loading...</p>
+      ) : q.status === 'error' ? (
+        <p>Error: {q.error.message}</p>
+      ) : (
+        <>
+          {q.data?.pages.map((group, i) => (
+            <Fragment key={i}>
+              {group.items.map((msg) => (
+                <Fragment key={msg.id}>
+                  <div>{msg.title}</div>
+                </Fragment>
+              ))}
+            </Fragment>
+          ))}
+          <div>
+            <button
+              onClick={() => q.fetchNextPage()}
+              disabled={!q.hasNextPage || q.isFetchingNextPage}
+              data-testid="loadMore"
+            >
+              {q.isFetchingNextPage
+                ? 'Loading more...'
+                : q.hasNextPage
+                ? 'Load More'
+                : 'Nothing more to load'}
+            </button>
+          </div>
+          <div>
+            {q.isFetching && !q.isFetchingNextPage ? 'Fetching...' : null}
+          </div>
+        </>
+      );
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+    });
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+      expect(utils.container).not.toHaveTextContent('second post');
+      expect(utils.container).toHaveTextContent('Load More');
+    });
+    userEvent.click(utils.getByTestId('loadMore'));
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('Loading more...');
+    });
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+      expect(utils.container).toHaveTextContent('second post');
+      expect(utils.container).toHaveTextContent('Nothing more to load');
+    });
+
+    expect(utils.container).toMatchInlineSnapshot(`
+    <div>
+      <div>
+        first post
+      </div>
+      <div>
+        second post
+      </div>
+      <div>
+        <button
+          data-testid="loadMore"
+          disabled=""
+        >
+          Nothing more to load
+        </button>
+      </div>
+      <div />
+    </div>
+  `);
+  });
+
+  test('useInfiniteQuery and prefetchInfiniteQuery', async () => {
+    const { trpc, client } = factory;
+
+    function MyComponent() {
+      const trpcContext = trpc.useContext();
+      const q = trpc.paginatedPosts.useInfiniteQuery(
+        {
+          limit: 1,
+        },
+        {
+          getNextPageParam: (lastPage) => lastPage.nextCursor,
+        },
+      );
+
+      expectTypeOf(q.data?.pages[0]?.items).toMatchTypeOf<undefined | Post[]>();
+
+      return q.status === 'loading' ? (
+        <p>Loading...</p>
+      ) : q.status === 'error' ? (
+        <p>Error: {q.error.message}</p>
+      ) : (
+        <>
+          {q.data?.pages.map((group, i) => (
+            <Fragment key={i}>
+              {group.items.map((msg) => (
+                <Fragment key={msg.id}>
+                  <div>{msg.title}</div>
+                </Fragment>
+              ))}
+            </Fragment>
+          ))}
+          <div>
+            <button
+              onClick={() => q.fetchNextPage()}
+              disabled={!q.hasNextPage || q.isFetchingNextPage}
+              data-testid="loadMore"
+            >
+              {q.isFetchingNextPage
+                ? 'Loading more...'
+                : q.hasNextPage
+                ? 'Load More'
+                : 'Nothing more to load'}
+            </button>
+          </div>
+          <div>
+            <button
+              data-testid="prefetch"
+              onClick={() =>
+                trpcContext.paginatedPosts.prefetchInfinite({ limit: 1 })
+              }
+            >
+              Prefetch
+            </button>
+          </div>
+          <div>
+            {q.isFetching && !q.isFetchingNextPage ? 'Fetching...' : null}
+          </div>
+        </>
+      );
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+    });
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+      expect(utils.container).not.toHaveTextContent('second post');
+      expect(utils.container).toHaveTextContent('Load More');
+    });
+    userEvent.click(utils.getByTestId('loadMore'));
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('Loading more...');
+    });
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+      expect(utils.container).toHaveTextContent('second post');
+      expect(utils.container).toHaveTextContent('Nothing more to load');
+    });
+
+    expect(utils.container).toMatchInlineSnapshot(`
+    <div>
+      <div>
+        first post
+      </div>
+      <div>
+        second post
+      </div>
+      <div>
+        <button
+          data-testid="loadMore"
+          disabled=""
+        >
+          Nothing more to load
+        </button>
+      </div>
+      <div>
+        <button
+          data-testid="prefetch"
+        >
+          Prefetch
+        </button>
+      </div>
+      <div />
+    </div>
+  `);
+
+    userEvent.click(utils.getByTestId('prefetch'));
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('Fetching...');
+    });
+    await waitFor(() => {
+      expect(utils.container).not.toHaveTextContent('Fetching...');
+    });
+
+    // It should correctly fetch both pages
+    expect(utils.container).toHaveTextContent('first post');
+    expect(utils.container).toHaveTextContent('second post');
+  });
+
+  test('useInfiniteQuery and fetchInfiniteQuery', async () => {
+    const { trpc, client } = factory;
+
+    function MyComponent() {
+      const trpcContext = trpc.useContext();
+      const q = trpc.paginatedPosts.useInfiniteQuery(
+        {
+          limit: 1,
+        },
+        {
+          getNextPageParam: (lastPage) => lastPage.nextCursor,
+        },
+      );
+      expectTypeOf(q.data?.pages[0]?.items).toMatchTypeOf<undefined | Post[]>();
+
+      return q.status === 'loading' ? (
+        <p>Loading...</p>
+      ) : q.status === 'error' ? (
+        <p>Error: {q.error.message}</p>
+      ) : (
+        <>
+          {q.data?.pages.map((group, i) => (
+            <Fragment key={i}>
+              {group.items.map((msg) => (
+                <Fragment key={msg.id}>
+                  <div>{msg.title}</div>
+                </Fragment>
+              ))}
+            </Fragment>
+          ))}
+          <div>
+            <button
+              onClick={() => q.fetchNextPage()}
+              disabled={!q.hasNextPage || q.isFetchingNextPage}
+              data-testid="loadMore"
+            >
+              {q.isFetchingNextPage
+                ? 'Loading more...'
+                : q.hasNextPage
+                ? 'Load More'
+                : 'Nothing more to load'}
+            </button>
+          </div>
+          <div>
+            <button
+              data-testid="fetch"
+              onClick={() =>
+                trpcContext.paginatedPosts.fetchInfinite({ limit: 1 })
+              }
+            >
+              Fetch
+            </button>
+          </div>
+          <div>
+            {q.isFetching && !q.isFetchingNextPage ? 'Fetching...' : null}
+          </div>
+        </>
+      );
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+    });
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+      expect(utils.container).not.toHaveTextContent('second post');
+      expect(utils.container).toHaveTextContent('Load More');
+    });
+    userEvent.click(utils.getByTestId('loadMore'));
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('Loading more...');
+    });
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+      expect(utils.container).toHaveTextContent('second post');
+      expect(utils.container).toHaveTextContent('Nothing more to load');
+    });
+
+    expect(utils.container).toMatchInlineSnapshot(`
+    <div>
+      <div>
+        first post
+      </div>
+      <div>
+        second post
+      </div>
+      <div>
+        <button
+          data-testid="loadMore"
+          disabled=""
+        >
+          Nothing more to load
+        </button>
+      </div>
+      <div>
+        <button
+          data-testid="fetch"
+        >
+          Fetch
+        </button>
+      </div>
+      <div />
+    </div>
+  `);
+
+    userEvent.click(utils.getByTestId('fetch'));
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('Fetching...');
+    });
+    await waitFor(() => {
+      expect(utils.container).not.toHaveTextContent('Fetching...');
+    });
+
+    // It should correctly fetch both pages
+    expect(utils.container).toHaveTextContent('first post');
+    expect(utils.container).toHaveTextContent('second post');
+  });
+
+  test('prefetchInfiniteQuery()', async () => {
+    const { appRouter } = factory;
+    const ssg = createProxySSGHelpers({ router: appRouter, ctx: {} });
+
+    {
+      await ssg.paginatedPosts.prefetchInfinite({ limit: 1 });
+      const data = JSON.stringify(ssg.dehydrate());
+      expect(data).toContain('first post');
+      expect(data).not.toContain('second post');
+    }
+    {
+      await ssg.paginatedPosts.fetchInfinite({ limit: 2 });
+      const data = JSON.stringify(ssg.dehydrate());
+      expect(data).toContain('first post');
+      expect(data).toContain('second post');
+    }
+  });
+});
diff --git a/packages/tests/server/react/invalidateQueries.test.tsx b/packages/tests/server/react/invalidateQueries.test.tsx
new file mode 100644
index 00000000000..2e89af23c07
--- /dev/null
+++ b/packages/tests/server/react/invalidateQueries.test.tsx
@@ -0,0 +1,234 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { createQueryClient } from '../__queryClient';
+import { createAppRouter } from './__testHelpers';
+import { QueryClientProvider, useQueryClient } from '@tanstack/react-query';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import React, { useState } from 'react';
+
+let factory: ReturnType<typeof createAppRouter>;
+beforeEach(() => {
+  factory = createAppRouter();
+});
+afterEach(() => {
+  factory.close();
+});
+
+describe('invalidateQueries()', () => {
+  test('queryClient.invalidateQueries()', async () => {
+    const { trpc, resolvers, client } = factory;
+    function MyComponent() {
+      const allPostsQuery = trpc.allPosts.useQuery(undefined, {
+        staleTime: Infinity,
+      });
+      const postByIdQuery = trpc.postById.useQuery('1', {
+        staleTime: Infinity,
+      });
+      const queryClient = useQueryClient();
+
+      return (
+        <>
+          <pre>
+            allPostsQuery:{allPostsQuery.status} allPostsQuery:
+            {allPostsQuery.isStale ? 'stale' : 'not-stale'}{' '}
+          </pre>
+          <pre>
+            postByIdQuery:{postByIdQuery.status} postByIdQuery:
+            {postByIdQuery.isStale ? 'stale' : 'not-stale'}
+          </pre>
+          <button
+            data-testid="refetch"
+            onClick={() => {
+              queryClient.invalidateQueries([['allPosts']]);
+              queryClient.invalidateQueries([['postById']]);
+            }}
+          />
+        </>
+      );
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('postByIdQuery:success');
+      expect(utils.container).toHaveTextContent('allPostsQuery:success');
+
+      expect(utils.container).toHaveTextContent('postByIdQuery:not-stale');
+      expect(utils.container).toHaveTextContent('allPostsQuery:not-stale');
+    });
+
+    expect(resolvers.allPosts).toHaveBeenCalledTimes(1);
+    expect(resolvers.postById).toHaveBeenCalledTimes(1);
+
+    utils.getByTestId('refetch').click();
+
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('postByIdQuery:stale');
+      expect(utils.container).toHaveTextContent('allPostsQuery:stale');
+    });
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('postByIdQuery:not-stale');
+      expect(utils.container).toHaveTextContent('allPostsQuery:not-stale');
+    });
+
+    expect(resolvers.allPosts).toHaveBeenCalledTimes(2);
+    expect(resolvers.postById).toHaveBeenCalledTimes(2);
+  });
+
+  test('invalidateQueries()', async () => {
+    const { trpc, resolvers, client } = factory;
+    function MyComponent() {
+      const allPostsQuery = trpc.allPosts.useQuery(undefined, {
+        staleTime: Infinity,
+      });
+      const postByIdQuery = trpc.postById.useQuery('1', {
+        staleTime: Infinity,
+      });
+      const utils = trpc.useContext();
+      return (
+        <>
+          <pre>
+            allPostsQuery:{allPostsQuery.status} allPostsQuery:
+            {allPostsQuery.isStale ? 'stale' : 'not-stale'}{' '}
+          </pre>
+          <pre>
+            postByIdQuery:{postByIdQuery.status} postByIdQuery:
+            {postByIdQuery.isStale ? 'stale' : 'not-stale'}
+          </pre>
+          <button
+            data-testid="refetch"
+            onClick={() => {
+              utils.allPosts.invalidate();
+              utils.postById.invalidate('1');
+            }}
+          />
+        </>
+      );
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('postByIdQuery:success');
+      expect(utils.container).toHaveTextContent('allPostsQuery:success');
+
+      expect(utils.container).toHaveTextContent('postByIdQuery:not-stale');
+      expect(utils.container).toHaveTextContent('allPostsQuery:not-stale');
+    });
+
+    expect(resolvers.allPosts).toHaveBeenCalledTimes(1);
+    expect(resolvers.postById).toHaveBeenCalledTimes(1);
+
+    utils.getByTestId('refetch').click();
+
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('postByIdQuery:stale');
+      expect(utils.container).toHaveTextContent('allPostsQuery:stale');
+    });
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('postByIdQuery:not-stale');
+      expect(utils.container).toHaveTextContent('allPostsQuery:not-stale');
+    });
+
+    expect(resolvers.allPosts).toHaveBeenCalledTimes(2);
+    expect(resolvers.postById).toHaveBeenCalledTimes(2);
+  });
+
+  test('test invalidateQueries() with different args - flaky', async () => {
+    // ref  https://github.com/trpc/trpc/issues/1383
+    const { trpc, client } = factory;
+    function MyComponent() {
+      const countQuery = trpc.count.useQuery('test', {
+        staleTime: Infinity,
+      });
+      const utils = trpc.useContext();
+      return (
+        <>
+          <pre>count:{countQuery.data}</pre>
+          <button
+            data-testid="invalidate-1-string"
+            onClick={() => {
+              utils.count.invalidate();
+            }}
+          />
+          <button
+            data-testid="invalidate-2-exact"
+            onClick={() => {
+              utils.count.invalidate('test');
+            }}
+          />
+          <button
+            data-testid="invalidate-3-all"
+            onClick={() => {
+              utils.invalidate();
+            }}
+          />{' '}
+          <button
+            data-testid="invalidate-4-predicate"
+            onClick={() => {
+              utils.invalidate({
+                predicate(opts) {
+                  const { queryKey } = opts;
+                  const [path, input] = queryKey;
+
+                  return path === 'count' && input === 'test';
+                },
+              });
+            }}
+          />
+        </>
+      );
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('count:test:0');
+    });
+
+    for (const testId of [
+      'invalidate-1-string',
+      'invalidate-2-exact',
+      'invalidate-3-all',
+      'invalidate-4-predicate',
+    ]) {
+      // click button to invalidate
+      utils.getByTestId(testId).click();
+
+      // should become stale straight after the click
+      await waitFor(() => {
+        expect(utils.container).toHaveTextContent(`count:test:1`);
+      });
+    }
+  });
+});
diff --git a/packages/tests/server/react/prefetchQuery.test.tsx b/packages/tests/server/react/prefetchQuery.test.tsx
new file mode 100644
index 00000000000..cdc64b9a8a2
--- /dev/null
+++ b/packages/tests/server/react/prefetchQuery.test.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { createQueryClient } from '../__queryClient';
+import { createAppRouter } from './__testHelpers';
+import {
+  QueryClientProvider,
+  dehydrate,
+  useQueryClient,
+} from '@tanstack/react-query';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import React, { useEffect, useState } from 'react';
+
+let factory: ReturnType<typeof createAppRouter>;
+beforeEach(() => {
+  factory = createAppRouter();
+});
+afterEach(() => {
+  factory.close();
+});
+
+describe('prefetchQuery()', () => {
+  test('with input', async () => {
+    const { trpc, client } = factory;
+    function MyComponent() {
+      const [state, setState] = useState<string>('nope');
+      const utils = trpc.useContext();
+      const queryClient = useQueryClient();
+
+      useEffect(() => {
+        async function prefetch() {
+          await utils.postById.prefetch('1');
+          setState(JSON.stringify(dehydrate(queryClient)));
+        }
+        prefetch();
+      }, [queryClient, utils]);
+
+      return <>{JSON.stringify(state)}</>;
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('first post');
+    });
+  });
+});
diff --git a/packages/tests/server/react/regression/issue-1645-setErrorStatusSSR.test.tsx b/packages/tests/server/react/regression/issue-1645-setErrorStatusSSR.test.tsx
new file mode 100644
index 00000000000..4f14815682c
--- /dev/null
+++ b/packages/tests/server/react/regression/issue-1645-setErrorStatusSSR.test.tsx
@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { createAppRouter } from '../__testHelpers';
+import '@testing-library/jest-dom';
+import { withTRPC } from '@trpc/next/src';
+import { AppType } from 'next/dist/shared/lib/utils';
+import React from 'react';
+
+let factory: ReturnType<typeof createAppRouter>;
+beforeEach(() => {
+  factory = createAppRouter();
+});
+afterEach(() => {
+  factory.close();
+});
+
+/**
+ * @link https://github.com/trpc/trpc/pull/1645
+ */
+test('regression: SSR with error sets `status`=`error`', async () => {
+  // @ts-ignore
+  const { window } = global;
+
+  let queryState: any;
+  // @ts-ignore
+  delete global.window;
+  const { trpc, trpcClientOptions } = factory;
+  const App: AppType = () => {
+    // @ts-ignore
+    const query1 = trpc.bad_useQuery.useQuery();
+    // @ts-ignore
+    const query2 = trpc.bad_useInfiniteQuery.useInfiniteQuery();
+    queryState = {
+      query1: {
+        status: query1.status,
+        error: query1.error,
+      },
+      query2: {
+        status: query2.status,
+        error: query2.error,
+      },
+    };
+    return <>{JSON.stringify(query1.data || null)}</>;
+  };
+
+  const Wrapped = withTRPC({
+    config: () => trpcClientOptions,
+    ssr: true,
+  })(App);
+
+  await Wrapped.getInitialProps!({
+    AppTree: Wrapped,
+    Component: <div />,
+  } as any);
+
+  // @ts-ignore
+  global.window = window;
+  expect(queryState.query1.error).toMatchInlineSnapshot(
+    `[TRPCClientError: No "query"-procedure on path "bad_useQuery"]`,
+  );
+  expect(queryState.query2.error).toMatchInlineSnapshot(
+    `[TRPCClientError: No "query"-procedure on path "bad_useInfiniteQuery"]`,
+  );
+  expect(queryState.query1.status).toBe('error');
+  expect(queryState.query2.status).toBe('error');
+});
diff --git a/packages/tests/server/react/setInfiniteQueryData.test.tsx b/packages/tests/server/react/setInfiniteQueryData.test.tsx
new file mode 100644
index 00000000000..f64297cdfb9
--- /dev/null
+++ b/packages/tests/server/react/setInfiniteQueryData.test.tsx
@@ -0,0 +1,113 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { createQueryClient } from '../__queryClient';
+import { createAppRouter } from './__testHelpers';
+import { QueryClientProvider } from '@tanstack/react-query';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import React, { useState } from 'react';
+
+let factory: ReturnType<typeof createAppRouter>;
+beforeEach(() => {
+  factory = createAppRouter();
+});
+afterEach(() => {
+  factory.close();
+});
+
+describe('setInfiniteQueryData()', () => {
+  test('with & without callback', async () => {
+    const { trpc, client } = factory;
+    function MyComponent() {
+      const utils = trpc.useContext();
+      const allPostsQuery = trpc.paginatedPosts.useInfiniteQuery(
+        {},
+        {
+          enabled: false,
+          getNextPageParam: (next) => next.nextCursor,
+        },
+      );
+      return (
+        <>
+          <pre>
+            {JSON.stringify(
+              allPostsQuery.data?.pages.map((p) => p.items) ?? null,
+              null,
+              4,
+            )}
+          </pre>
+          <button
+            data-testid="setInfiniteQueryData"
+            onClick={async () => {
+              // Add a new post to the first page (without callback)
+              utils.paginatedPosts.setInfiniteData(
+                {},
+                {
+                  pages: [
+                    {
+                      items: [
+                        {
+                          id: 'id',
+                          title: 'infinitePosts.title1',
+                          createdAt: Date.now(),
+                        },
+                      ],
+                      nextCursor: null,
+                    },
+                  ],
+                  pageParams: [],
+                },
+              );
+
+              const newPost = {
+                id: 'id',
+                title: 'infinitePosts.title2',
+                createdAt: Date.now(),
+              };
+
+              // Add a new post to the first page (with callback)
+              utils.paginatedPosts.setInfiniteData({}, (data) => {
+                expect(data).not.toBe(undefined);
+
+                if (!data) {
+                  return {
+                    pages: [],
+                    pageParams: [],
+                  };
+                }
+
+                return {
+                  ...data,
+                  pages: data.pages.map((page) => {
+                    return {
+                      ...page,
+                      items: [...page.items, newPost],
+                    };
+                  }),
+                };
+              });
+            }}
+          />
+        </>
+      );
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+
+    utils.getByTestId('setInfiniteQueryData').click();
+
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('infinitePosts.title1');
+      expect(utils.container).toHaveTextContent('infinitePosts.title2');
+    });
+  });
+});
diff --git a/packages/tests/server/react/setQueryData.test.tsx b/packages/tests/server/react/setQueryData.test.tsx
new file mode 100644
index 00000000000..7659d28cbc9
--- /dev/null
+++ b/packages/tests/server/react/setQueryData.test.tsx
@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { createQueryClient } from '../__queryClient';
+import { createAppRouter } from './__testHelpers';
+import { QueryClientProvider } from '@tanstack/react-query';
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import React, { useState } from 'react';
+
+let factory: ReturnType<typeof createAppRouter>;
+beforeEach(() => {
+  factory = createAppRouter();
+});
+afterEach(() => {
+  factory.close();
+});
+
+describe('setQueryData()', () => {
+  test('without & without callback', async () => {
+    const { trpc, client } = factory;
+    function MyComponent() {
+      const utils = trpc.useContext();
+      const allPostsQuery = trpc.allPosts.useQuery(undefined, {
+        enabled: false,
+      });
+      const postByIdQuery = trpc.postById.useQuery('1', {
+        enabled: false,
+      });
+      return (
+        <>
+          <pre>{JSON.stringify(allPostsQuery.data ?? null, null, 4)}</pre>
+          <pre>{JSON.stringify(postByIdQuery.data ?? null, null, 4)}</pre>
+          <button
+            data-testid="setQueryData"
+            onClick={async () => {
+              utils.allPosts.setData(
+                undefined,
+                [
+                  {
+                    id: 'id',
+                    title: 'allPost.title',
+                    createdAt: Date.now(),
+                  },
+                ],
+                undefined,
+              );
+              const newPost = {
+                id: 'id',
+                title: 'postById.tmp.title',
+                createdAt: Date.now(),
+              };
+              utils.postById.setData('1', (data) => {
+                expect(data).toBe(undefined);
+                return newPost;
+              });
+              // now it should be set
+              utils.postById.setData('1', (data) => {
+                expect(data).toEqual(newPost);
+                if (!data) {
+                  return newPost;
+                }
+                return {
+                  ...data,
+                  title: 'postById.title',
+                };
+              });
+            }}
+          />
+        </>
+      );
+    }
+    function App() {
+      const [queryClient] = useState(() => createQueryClient());
+      return (
+        <trpc.Provider {...{ queryClient, client }}>
+          <QueryClientProvider client={queryClient}>
+            <MyComponent />
+          </QueryClientProvider>
+        </trpc.Provider>
+      );
+    }
+
+    const utils = render(<App />);
+
+    utils.getByTestId('setQueryData').click();
+
+    await waitFor(() => {
+      expect(utils.container).toHaveTextContent('allPost.title');
+      expect(utils.container).toHaveTextContent('postById.title');
+    });
+  });
+});