directus/sdk interceptor

[1Luc1]

Summary

I was wondering if there is any good way to handle general responses from the directus sdk calls. Within axios they have interceptors which may be quite use full to handle error responses 400, 401, ...

With the previous client there was something possible to use the internal axios interceptor. Example here.

So is there a way to define an general interceptor / handler and not do it with every request call like below

directusClient
  .with(authentication())
  .request(readItems(name))
  .then((errors) => {
    // https://github.com/directus/directus/pull/19539
    // handle error
  });

[br41nslug]

Work for that is already ongoing #21474
In the meantime using ofetch allows you to approximate the old axios interceptor feature.

[1Luc1]

Thanks for the info. I'll use ofetch for now to have some interception logic.
For anyone interested in how I solved it:

import { createDirectus, rest } from "@directus/sdk";
import { ofetch } from "ofetch";

const apiFetch = ofetch.create({
  onRequestError({ error }) {
    return Promise.reject(error);
  },
  onResponseError({ response }) {
    // get error code
    const errorCode = response._data.errors[0].extensions.code;
    // https://docs.directus.io/reference/introduction.html#error-codes
    switch (errorCode) {
      case "TOKEN_EXPIRED":
        // TODO refresh token
        console.log("token is expired -> refresh");
        break;
      case "INVALID_CREDENTIALS":
        console.log("invalid user credentials");
        break;
    }

    return Promise.reject(response);
  },
});

const directusClient = createDirectus(import.meta.env.VITE_API_URL, {
  globals: {
    fetch: apiFetch,
  },
}).with(rest());

export default directusClient;

[br41nslug]

Make sure to use createDirectus('url', { globals: { fetch: apiFetch.native } }) for best compatibility with the Fetch API.

[1Luc1]

if i use native the interceptors won't be called