Build a subscription workflow with Temporal and TypeScript

[angelazhou32]

This tutorial rewrites the subscription tutorial in TS on the learn site (https://learn.temporal.io/tutorials/typescript/subscriptions/).

It uses code pulled from this repository: https://github.com/temporalio/subscription-workflow-project-template-typescript

Preview: https://temporal-learning-git-ts-subscription-workflow.preview.thundergun.io/tutorials/typescript/subscriptions/

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
temporal-learning	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 25, 2024 7:12pm

[jdnichollsc]

Hey folks, I have the question about that old example... do you have examples of sending an update (signal) to those variables created with that useState function? That's not really clear, so I understand why you're removing that in this PR 😅

[angelazhou32]

Hey folks, I have the question about that old example... do you have examples of sending an update (signal) to those variables created with that useState function? That's not really clear, so I understand why you're removing that in this PR 😅

Hey @jdnichollsc, thanks for your message! I agree that the useState function is not really clear, so we are in the process of rewriting this tutorial and it should be ready soon! However, the point of that function is to show how to define and handle Signals and Queries. You can see a more updated example in this file.

Though not complete, there is prose in this tutorial that explains how the defining and setting handlers of those Signals and Queries are used.

[jdnichollsc]

Hey folks, I have the question about that old example... do you have examples of sending an update (signal) to those variables created with that useState function? That's not really clear, so I understand why you're removing that in this PR 😅

Hey @jdnichollsc, thanks for your message! I agree that the useState function is not really clear, so we are in the process of rewriting this tutorial and it should be ready soon! However, the point of that function is to show how to define and handle Signals and Queries. You can see a more updated example in this file.

Though not complete, there is prose in this tutorial that explains how the defining and setting handlers of those Signals and Queries are used.

Thanks for letting me know! As I saw, the useState is used for supporting queries and signals with the variables defined from the workflow:

async function myWorkflow(_customer: Customer) {
  const customer = useState('customer', _customer); // wrapped up signals + queries + state
  const period = useState('period', 0);
}

so basically we can use a query like this:

const handle = client.getHandle('my-workflow-id');
const customer = await handle.query<number>('customer');

and also send a signal:

const handle = client.getHandle('my-workflow-id');
await handle.signal<[number]>('period', 2);

This was an interesting approach (similar to React), wondering if you are not using that anymore 🤔

[angelazhou32]

now! As I saw, the useState is used for supporting queries and signals with the variables defined from the workflow:

We are not using useState to define and handle Signals/Queries - you're right, that's a React concept to set a state variable to the component, not to be used to define and handle Signals+Queries. The examples you showed in the second and third code blocks that you provide are the right direction.

For more information, check out our documentation: https://docs.temporal.io/develop/typescript/message-passing Or our courses on Signals+Queries: https://learn.temporal.io/courses/interacting_with_workflows/

Thanks :)