Make it possible to not preserve some headers #2867
Description
Is your feature request related to a problem? Please describe.
We're trying to enable altair-static on a service which works with bearer token authorization. To make it work, we acquire a bearer token from the backend and inject it in a custom header using "initialHeaders" field. When the token becomes invalid, we can detect this and acquire a new token, but altair doesn't pick up the new one as it still remembers the "initialHeader" because "preserveState" is set to true. Currently, only way to workaround this seems to be setting "preserveState" to false, but it's not convenient as it clears the workspace every time.
Describe the solution you'd like
An api field where we can set the authorization header, which doesn't behave the same as "initialHeaders"
Describe alternatives you've considered
Only alternative seems to be setting "preserveState" to false.
Additional context
Pseudo code showing what we're currently doing:
<!DOCTYPE html>
<html>
<head>
<title>Altair</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<app-root>
...
</app-root>
...
<script rel="preload" as="script" type="text/javascript" src="runtime.js"></script>
<script rel="preload" as="script" type="text/javascript" src="polyfills.js"></script>
<script rel="preload" as="script" type="text/javascript" src="main.js"></script>
<script>
function loginNeeded() {
if (!localStorage.token) {
return true
}
if (!testApiCall()) {
localStorage.removeItem("token")
return true
}
return false
}
function startAltair() {
AltairGraphQL.init({
endpointURL: `https://${window.location.host}/api/graphql`,
initialHeaders: { "Authorization": `Bearer ${localStorage.token}` },
preserveState: false,
initialQuery: `query { devices { id } }`
});
}
document.addEventListener('DOMContentLoaded', () => {
if (loginNeeded()) {
// open login dialog to ask username/password & get a bearer token from the backend
} else {
startAltair()
}
})
</script>
</body>
</html>