Does Gatsby need to rebuild my entire site every time a docpage is updated?

Question

I am creating a Documentation site to hold DocPages for each of my products. Gatsby is building all of my sites as static pages. I have multiple tech writers who are constantly updating and creating new pages. How does Gatsby handle this? Do I have to rebuild my entire site with Gatsby each time something is updated?

Answer 1

gatsby-source-contentful plugin uses the sync API. If you keep the .cache and public folder around the plugin will be able to get only the changed entries and assets and update the Gatsby data. by keeping the .cache should build faster.

depend on you webhook Setup this build process may be triggered many times to workaround that maybe you can add a script that delays the builds and make sure that only one build process is running.

Answer 2

I know it is an old question, but I struggled with this today and it seems noone out there gave a decent post or answer about it, Gatsby v2 still rebuilds everything when you restart gatsby develop. This is a no-go if your build takes 20min on first run. My solution is below.

You could use the cache API to save a hash or updatedAt info of your data, and only call createPage action if the cache doesn't match (the data was updated)

This is how I do it in my project:

exports.createPages = async ({ actions: { createPage }, graphql, cache }) => {
  const results = await graphql(`
    query GetAllCars {
      myNamespaceFromGraphqlSource {
        allCars {
          id
          updatedAt
        }
      }
    }
  `);

  const createDetailsPage = async (car) => {
    const carCache = await cache.get(car.id);
    if(carCache != car.updatedAt) {
      createPage({
        path: `/car_details/${car.id}/`,
        component: require.resolve("./src/templates/details.js"),
        context: {
          id: car.id,
        },
      });
      await cache.set(car.id, car.updatedAt);
    }
  }

  for(let i=0; i < results.data.myNamespaceFromGraphqlSource.allCars.length; i++ ) {
    const car = results.data.myNamespaceFromGraphqlSource.allCars[i];
    await createDetailsPage(car)
  }