When interacting with the network in our frontend, we use the @simonbackx/simple-networking library. This library handles a couple of things for us, such as providing middleware support (which enabled retry behaviour when there are network issues, auto renewing access tokens…). It also provides support for canceling requests and associating owners with requests.

Servers

A server is a combination of middlewares and the API host you want to call:

const server = new Server("https://"+STAMHOOFD.domains.api)
server.middlewares.push(this)

NetworkManager.server

In Stamhoofd NetworkManager provides the main server to communicate with the API. It also self assigns it as a middleware. This middleware is implemented in methods such as shouldRetryNetworkError and definces how we handle errors, timeouts, retries, in the frontend.

Key features

• When there are network issues, your requests will be automatically retried using exponential backoff.
• It handles deprecated clients: if the server reports to that the client version is not supported any longer, the NetworkManager will present an update dialog.

SessionContext.server / SessionContext.authenticatedServer

Some classes expand on this, such as the SessionContext. The sessionContext provides two servers: one with authentication and one without. The authenticated server will auto inject the Authorization header in every HTTP request (which contains the current access_token) - so the server knows the currently signed in user.

Key features

• Automatically refreshing the access token, invisibly. If you fire an authenticated request, it will first renew the access token if it is expired. If the server throws an error that the access token is expired, it will also refresh the token and automatically retry the request without the caller knowing.
• Logging you out if the access token is invalid or the refresh token is expired

You can access the current context from anywhere in Vue using the useContext hook:

<script lang="ts" setup>
const context = useContext();
const owner = useRequestOwner();

async function doRequest(patch: AutoEncoderPatchType<Organization>) {
		await context.value.authenticatedServer.request({
				method: 'PATCH',
        path: '/organizations',
        body: patch,
        shouldRetry: false,
				owner
		});
}
</script>

Usage

GET requests