Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Version Downloads Total License CodeFactor


This plugin is used to cache any API.


$ npm i gatsby-plugin-cache-api


$ yarn add gatsby-plugin-cache-api

How to use

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,

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)

  }, [])

  return <div> {breeds.map((breed)=> <p key={breeds}>{breeds}</p>)} </div>;

export default MyComponent;

On build Time

In the terminal you will see a success log with the path and name of the generated file

Shell Example


The code is available under the MIT License.

© 2023 Gatsby, Inc.