Hello! Firstly, apologies if this has been asked before. I have searched for a possible solution but haven’t found what I’m looking for. I am new to Typeform and am considering using it for a survey based webapp. My question is:
Is it possible to retrieve the results (within React) of the response of a custom Webhook API?
This is roughly what I’d like to build if possible.
I’ve read the callbacks and is see there’s an onSubmit, but I don’t see one for Webhook responses.
Ultimately, what is the best way to retrieve the python server response’s payload from react? Can it be done with just the Custom Webhook API Call? If so, how can it be stored in react state?
Thank you!
Best answer by mathio-tf
Hello @TryingToBuildBeautifully (nice nick name 😅),
thank you for your question and very nice diagrams to explain your question - BTW what tool did you use to draw those?
Your second proposed approach seems feasible. However make sure to build a proxy to communicate with Typeform API as you don’t want to expose your personal token in the frontend. You could even make the Typeform API request to retrieve responses from your Python server to make sure there is only single API request from frontend (and your Typeform personal token is kept safe on the backend).
If you would like to avoid piping the data through frontend React app, you could use websockets for communication between your webhook and React app.
Thanks for tagging! Alternatively, after sleeping on it and reading this. Is it better practice to:
Submit the form to TypeForm, store the responseId from onSubmit callaback, request the form responses with the responseId by calling TypeForm API. Once I’ve gotten the responses, call my Python Server directly from React with the form responses, get the results, etc. etc.?
Thus circumventing the Custom WebHook? Here’s my mockup if helpful
Hello @TryingToBuildBeautifully (nice nick name 😅),
thank you for your question and very nice diagrams to explain your question - BTW what tool did you use to draw those?
Your second proposed approach seems feasible. However make sure to build a proxy to communicate with Typeform API as you don’t want to expose your personal token in the frontend. You could even make the Typeform API request to retrieve responses from your Python server to make sure there is only single API request from frontend (and your Typeform personal token is kept safe on the backend).
If you would like to avoid piping the data through frontend React app, you could use websockets for communication between your webhook and React app.
Thanks! I used draw.io. It’s free and pretty powerful.
Thanks for the response, I think everything makes sense. Understood on exposing the Typeform key when making the survey results request.
I think the websockets example is the best option; with the Typeform Custom webhook API, retrieving the results in react seems unnecessary when I really care about the Python Server’s output. I will read up on webhooks and use your JS example. Just to double check, I think this is what the simplified flow would look like?
