This plugin is used to cache any API.
$ npm i gatsby-plugin-cache-api
or
$ yarn add gatsby-plugin-cache-api
import the function cacheApi
in your gatsby-node.js
.
const cacheApi = require('gatsby-plugin-cache-api');
exports.onPreInit = async () => {
const api = await fetch('https://dog.ceo/api/breeds/list/all');
const json = await api.json();
const defineCache = {
pathOutput: 'js/json',
nameOutPath: 'breeds.json',
file: json.message,
};
cacheApi(defineCache);
};
In your component do a fetch directly in your application
const MyComponent = () => {
const [breeds, setBreeds] = useState([]);
useEffect(()=> {
const api = await fetch('./js/json/breeds.json'); //- cache
const json = await api.json();
const parseBreeds = Object.keys(json.message)
setBreeds(parseBreeds);
}, [])
return <div> {breeds.map((breed)=> <p key={breeds}>{breeds}</p>)} </div>;
};
export default MyComponent;
In the terminal you will see a success log with the path and name of the generated file
The code is available under the MIT License.