ONE central axios instance instead of REPEATED fetch() calls with the FULL URL – EXACTLY the approach from the earlier React/Magento API tutorials, applied here to API Platform.

Setting up the environment variable

VITE_API_URL=https://localhost/api

Creating the client

import axios from 'axios';

export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  headers: {
    'Content-Type': 'application/ld+json',
  },
});

application/ld+json instead of plain application/json – API Platform accepts BOTH (chapter 10), but ld+json uses the FULL JSON-LD capabilities (e.g. @id recognition for nested resources from block 5).

First usage

import { apiClient } from './api/client';

const response = await apiClient.get('/projects');
console.log(response.data);

/projects instead of the FULL URL – baseURL takes care of the SHARED prefix, EXACTLY as in chapter 8, but NOW CENTRALIZED in ONE place instead of repeated in EVERY individual call.

Self-signed certificates in the browser

EXACTLY as curl -k IGNORED the self-signed certificate in ALL previous chapters, the browser must be visited DIRECTLY at https://localhost/api ONCE and the security warning accepted MANUALLY – OTHERWISE axios requests from React fail with a network error, WITHOUT a meaningful error message.