Skip to content

DX issue with barriers and auth tokens #533

@AlexandrHoroshih

Description

@AlexandrHoroshih

Problem

If authBarrier is created following this guide
https://ff.effector.dev/recipes/auth_token.html
and there is no option to know the expiration date for a token => token refresh is triggered by queries returning 401 status

const authBarrier = createBarrier({
  activateOn: {
    failure: isHttpErrorCode(401),
  },
});

Then following problem is happening

  1. Query is triggered - returns 401 because of expired token
  2. Query's $data is dropped and $error is updated - it is a correct behavior, because it is a latest response
  3. Barrier is triggered, token is refreshed
  4. Query is re-triggered, now returns 200

Everything in this flow is correct in itself, but is also annoying to the end user:
Because of intermediate $data and $error updates UI will flicker, even though technically user does not care about this error-state, if it will go away the next moment, once token is updated

One option to fix that is to use separate, userland-created Stores for $data and $error, while abandoning the original Query's ones - but it is an annoying DX

Expectation

There is a more DX-friendly way to handle that situation, without sacrificing the query.$data and query.$error

Might be something similiar to retry's suppressIntermediateErrors 🤔

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions