2. Migration

v6 to v7

As resources have been deprecated for a while now, we wanted to remove lodash.merge as a hard dependency. It is also hard to keep up with the updates on Axios, so we wanted to make the user of this library responsible by moving that dependency to become peer dependency. It also makes working with other libraries we made easier, as deduping is handled by npm within the project, preventing the use of multiple/conflicting versions of Axios.

This means you have to npm install axios query-string.

v5 to v6

We’ve upgraded Axios from v0.x to v1.x, which means we don’t support Node v12 anymore. Upgrade to Node v14+ if you want to keep using this library.

v4 to v5

We’ve deprecated makeResource and replaced fetch with Axios in v5. What does that mean for your project?

2.1 Deprecated makeResource

What is a resource?

If you don’t know what a resource is, you should read about Resources.

Why deprecate it?

While resources could be very useful, sometimes not all endpoints are supported by the back-end. You might also have an entity that has some not-nullable properties that are only in the result when you fetch one, but those properties are not included in the result of the list endpoint. This means that a front-end developer might be working on a feature and decides to use a specific property, which is defined in the resource, but somehow the developer gets an error about the property being undefined. “Is it nullable then, and my colleague forgot to make it optional?”.

Explicit endpoint functions and result types

To prevent this kind of problems, we deprecated makeResource and advice developers to make explicit endpoint functions that perform a call to a specific endpoint and return the corresponding specific type. That would look like this:

import { get } from '@42.nl/spring-connect';

const USERS_API_URL = '/api/users';

type BasicUserResult = {
  id: number;
  fullName: string;
  age?: number;
};

function getUsers() {
  return get<BasicUserResult>(USERS_API_URL);
}

type UserResult = {
  id: number;
  first_name: string;
  last_name: string;
  birthday?: Date;
};

function getUser(id: number) {
  return get<UserResult>(`${USERS_API_URL}/${id}`);
}

2.2 Replace fetch with Axios

In previous versions we provided some middleware functions to parse responses and check the status. Axios has all those features built in, so we don’t need the middleware anymore. The authentication library is also prepared for Axios, so the following code:

import { configureMadConnect, checkStatus, parseJSON } from '@42.nl/spring-connect';

import { authFetch } from '@42.nl/authentication';

configureMadConnect({
  fetch: authFetch,
  middleware: [checkStatus, parseJSON, displayError],
});

can be replaced with:

import { getXSRFToken, authInterceptor } from '@42.nl/authentication';
import { configureApi } from '@42.nl/spring-connect';
import axios from 'axios';

const api = axios.create();
api.defaults.headers.common['X-XSRF-TOKEN'] = getXSRFToken();
api.defaults.withCredentials = true;
api.interceptors.response.use(undefined, authInterceptor);

configureApi(api);