h3llo•2mo ago

subscription tracked returns a 3-tuple to frontend instead of object

I am using tracked as per recommendation in https://trpc.io/docs/server/subscriptions#tracked like this:

for await (const [eventData] of iterable) {
    yield tracked(eventData.jobId, eventData);
  }

for await (const [eventData] of iterable) {
    yield tracked(eventData.jobId, eventData);
  }

It's properly typed on both frontend and backend, eg:

{
    id: string;
    data: someObject;
}

{
    id: string;
    data: someObject;
}

however what I actually receive on frontend is an 3-tuple [id, data, null]. I tried this both on versions "11.0.0-rc.666" and next and got the same results.

Subscriptions | tRPC

Introduction

1 Reply

h3lloOP•2mo ago

The current workaround to make both runtime and ts happy is to use yield* tracked instead of yield tracked, which returns TrackedId | someObject and then handle each case

if (typeof event === 'object') {
          console.log('From onData callback, object data', event);
        } else {
          console.log('From onData callback, trackedId', event);
        }

if (typeof event === 'object') {
          console.log('From onData callback, object data', event);
        } else {
          console.log('From onData callback, trackedId', event);
        }

but this is not optimal...

subscription tracked returns a 3-tuple to frontend instead of object

Did you find this page helpful?