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);