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={breed}>{breed}</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.