Use encore client in separate Frontend repo to fetch data from a PR environment

Since we have our backend and frontend in separate repositories, we often have to spend some time to populate our local backend databases to correspond to whichever frontend feature or component we are developing. This is not too much work and can sometimes even be beneficial as it helps you think about dependencies.

However, it becomes problematic when we’re reviewing PR:s. Currently, the reviewer of a frontend PR requires that the reviewer has a similar enough local backend database to the author of the PR. Even if we share database dumps, this means that the reviewer may need to reset their local database, which could be impractical if they’re working on a new backend feature.

SO - I’ve been thinking. I think the PR environments created by Encore are perfect for this. Then, the person populating the db could just temporarily open backend PR (triggering a PR env deploy), populate that db instead of the local db and then link/mention the backend PR number in the frontend PR.

The only thing that really prevents us from doing this now is knowing how to set up the client for this. The requirements are something like this.

  1. If frontend is in local dev mode → render component that lets user input BASE_URL or PR number
  2. Upon submission of new BASE_URL or PR number, update the client

I noticed there’s already this snippet as part of the client

/**
 * PreviewEnv returns a BaseURL for calling the preview environment with the given PR number.
 */
export function PreviewEnv(pr: number | string): BaseURL {
    return Environment(`pr${pr}`)
}

But I’m not sure what the right way to use it would be - so would love some help/feedback on how we could set this up and if there are any changes needed to the client before this could be done.