fix(package/gqty): useTransactionQuery should work without suspense

[vicary]

Fixes #2187

https://github.com/user-attachments/assets/384a1155-f1bb-42cf-9c11-533c473559e0

[github-actions[bot]]

🚀 Snapshot Release (canary)

The latest changes of this PR are available as canary on npm (based on the declared changesets):

Package	Version	Info
gqty	3.5.0-canary-20250716042700.b70e4ac870d0b5d178ed3a98999cd7e897ad9e54	npm ↗︎ unpkg ↗︎
@gqty/react	3.1.1-canary-20250716042700.b70e4ac870d0b5d178ed3a98999cd7e897ad9e54	npm ↗︎ unpkg ↗︎

[vicary]

@cdomigan Please feel free to test this canary, I'll release the patch once you find it working!

[cdomigan]

Not sure if I'm using it wrong, but I'm getting partial results returned, eg adding the following test to packages/react/test/useTransactionQuery.test.tsx:

  it('should not return partially undefined results', async () => {
    const { useTransactionQuery } = await createReactTestClient();

    const { result } = renderHook(() =>
      useTransactionQuery((query) => {
        const human = query.human();
        return {
          name: human.name
        };
      }, { suspense: false })
    );

    expect(result.current.data).toBeUndefined();
    await waitFor(() => expect(result.current.data).not.toBeUndefined());
    expect(result.current.data?.name).toBeInstanceOf(String);
  });

I'm seeing

packages/react test:   ● useTransactionQuery › should not return partially undefined results
packages/react test:     expect(received).toBeUndefined()
packages/react test:     Received: {"name": undefined}

The docs say that the data returned is only available after a successful fetch., so I had expected data to be undefined until it had successfully resolved?

[vicary]

@cdomigan You may have to wait until isLoading turns true and then false again to mean a successful fetch.

[cdomigan]

@vicary Thanks for that. DX a bit challenging with this, but I do understand this hook is considered legacy :)

PR looks good in terms of fixing the linked issue, thank you!

[vicary]

@cdomigan Despite marked as legacy, the purpose of this hook is to create a familiar experience for users from other libraries such as Apollo's useQuery. AFAIK they do have a loading state before a fetch, a second render gives you either data on success, or error on failure.

Do you think useTransactionQuery gives you a similar DX?