Repository: trpc/trpc
File: packages/tests/server/react/useQuery.test.tsx (TypeScript)

Code before:
            1,
            2,
          ],
          "status": "pending",
        },
        Object {
          "data": Array [
            1,
            2,
            3,
          ],
          "status": "success",
        },
      ]
    `);
    expect(states.map((s) => s.status)).toEqual([
      // initial
      'pending',
      // waiting 3 values
      'pending',
      'pending',
      'pending',
      // done iterating
      'success',
    ]);
  });
});

test('useInfiniteQuery()', async () => {
  const { App, client } = ctx;
  function MyComponent() {
    const trpcContext = client.useContext();
    const query1 = client.post.list.useInfiniteQuery(
      {},
      {
        getNextPageParam(lastPage) {
          return lastPage.next;
        },
      },
    );
    expect(query1.trpc.path).toBe('post.list');

    if (!query1.data) {
      return <>...</>;
    }

    expectTypeOf<
      InfiniteData<
        {
          items: typeof fixtureData;
          next?: number | undefined;

Review comment (suggestion):
My proposal for that test would be to also try observing the `fetching` state in addition to the `loading` state, as it could help inform the various possible `setState` used in the queryFn

```suggestion
  test('iterable', async () => {
    const { client, App } = ctx;
    const states: Partial<QueryState>[] = [];
    function MyComponent() {
      const query1 = client.post.iterable.useQuery(undefined, {
        trpc: {
          context: {
            stream: 1,
          },
        },
      });
      states.push({
        status: query1.status,
        data: query1.data,
        fetchStatus: query1.fetchStatus
      });

      expectTypeOf(query1.data!).toMatchTypeOf<number[]>();

      return (
        <pre>
          {query1.status}:{query1.isFetching ? 'fetching' : 'notFetching'}
        </pre>
      );
    }

    const utils = render(
      <App>
        <MyComponent />
      </App>,
    );
    await waitFor(() => {
      expect(utils.container).toHaveTextContent(`success:notFetching`);
    });

    expect(states).toMatchInlineSnapshot(`
      Array [
        Object {
          "data": undefined,
          "fetchStatus": "fetching",
          "status": "pending",
        },
        Object {
          "data": Array [],
          "fetchStatus": "fetching",
          "status": "pending",
        },
        Object {
          "data": Array [
            1,
          ],
          "fetchStatus": "fetching",
          "status": "pending",
        },
        Object {
          "data": Array [
            1,
            2,
          ],
          "fetchStatus": "fetching",
          "status": "pending",
        },
        Object {
          "data": Array [
            1,
            2,
            3,
          ],
          "fetchStatus": "idle",
          "status": "success",
        },
      ]
    `);
    expect(states.map((s) => `${s.status}-${s.fetchStatus}`)).toEqual([
      // initial
      'pending-fetching',
      // waiting 3 values
      'pending-fetching',
      'pending-fetching',
      'pending-fetching',
      // done iterating
      'success-idle',
    ]);
  });
```

Code after:
    );
    await waitFor(() => {
      expect(utils.container).toHaveTextContent(`success:notFetching`);
    });

    expect(states.map((s) => [s.status, s.fetchStatus])).toEqual([
      // initial
      ['pending', 'fetching'],
      // waiting 3 values
      ['success', 'fetching'],
      ['success', 'fetching'],
      ['success', 'fetching'],
      // done iterating
      ['success', 'idle'],
    ]);
    expect(states).toMatchInlineSnapshot(`
      Array [
        Object {
          "data": undefined,
          "fetchStatus": "fetching",
          "status": "pending",
        },
        Object {
          "data": Array [],
          "fetchStatus": "fetching",
          "status": "success",
        },
        Object {
          "data": Array [
            1,
          ],
          "fetchStatus": "fetching",
          "status": "success",
        },
        Object {
          "data": Array [
            1,
            2,
          ],
          "fetchStatus": "fetching",
          "status": "success",
        },
        Object {
          "data": Array [
            1,
            2,
            3,
          ],
          "fetchStatus": "idle",
          "status": "success",
        },