Waiting for a Pub/Sub Message from Google Cloud

So, I’ve been stuck on this for the past few days, and I’ve tried everything imaginable. For background, I’ll describe the web app, what’s supposed to happen, and where I’m stuck.

The web app I’ve made is a Next.js web app using google cloud resources to ingest a document, evaluate the document through document AI, and then the results of document AI are sent back to the user. I’ll list out the more granular steps below:

1. User uploads document and submits it on the web app
2. The document is stored on Cloud Storage
3. There is an eventarc trigger attached to Cloud Storage that sends the newly uploaded document to a google workflow
4. Within the google workflow, the document is sent to two Document AI processors: the normal OCR one, and the Summarizer one
5. The responses are returned and sent to a cloud function
6. Within the cloud function, the data is cleansed to be more digestible to the end user
7. Within the cloud function, after the data is cleansed, it’s stored in firestore
8. After it’s stored in firestore, it’s sent off to a Pub/Sub topic, with a push subscription attached to it. This subscription pushes to an API endpoint in the web app

This is the part that’s giving me trouble

9. The API endpoint then receives the data and pushes it to the front end, where it is saved in the results state.

The issue I’m having is, how can I sit and wait inside the API route for the data from the Pub/Sub to arrive? Because if I immediately call the API endpoint that the data receives, it’s not going to be there. I have tried using websockets but with no luck. Would I use SSE, try websockets again, etc.? I would like to avoid using polling.

Below is the relevant client side code:
For further background, the submissionSuccess state is what shows a loading symbol while the data is processed on the server side. It’s a boolean value that is set to true if the document was successfully uploaded to Cloud Storage.

useEffect(() => {
    const getResults = async () => {
      try {
        const res = await fetch('/api/getFileData')
        const data = await res.json()

        if (!res.ok) {
          throw new Error(`${res.status} - ${res.statusText}`)
        }

        setResults(data)

      } catch (error) {
        console.error(`Error retrieving analysis results: ${error}`)
        openSnackbar({ message: 'There was an error retrieving your analysis results, please try again later', severity: 'error' })
      }
    }
  }, [submissionSuccess])

Relevant API route:

export default async function handler(req, res) {
  try {
    const payload = req.body.message.data
    const message = Buffer.from(payload, 'base64').toString('utf-8')
    let workflowResponse = JSON.parse(message)

    return res.status(200).json(workflowResponse)
  } catch (error) {
    console.error(`Error retrieving data from Pub/Sub subscription: ${error}`)
    return res.status(500).json({ error: 'Internal Server Error' })
  }
}