Next.js seems to cache files as in a route of _next/data/[path].json preventing getStaticProps from running in server side render

Question

The issue appears to happen when I post the link on platforms like Discord and Slack, where then to produce a URL preview they send a request to the link. The link which in this case follows this structure (normal format) www.domain.com/ctg/[...ids].

Within [...ids] I either pass one of two ids for the same object, the object has the following structure:

type Catalogue {
  id: ID!
  edit_id: String!
  user_id: String!
  title: String
  ...
}

The first id I could pass into [...ids] would be Catalogue.id The second id I could pass into [...ids] would be Catalogue.edit_id

Whenever either of those inputs for [...ids] is passed as part of a request the following getStaticProps is ran:

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { ids } = params;
  let catalogue: CatalogueType | null = await fetchFullCatalogue(ids[0]);
  return {
    props: {
      catalogue_prop: catalogue,
      params,
    },
  };
};

with fetchFullCatalogue being:

export const fetchFullCatalogue = async (
  id: string
): Promise<CatalogueType | null> => {
  let catalogue: CatalogueType;
  const fetchToUrl =
    process.env.NODE_ENV === "development"
      ? "http://localhost:4000/graphql"
      : process.env.BACKEND_URL + "/graphql";
  // create a axios fetch request to the http://localhost:4000/graphql
  const query = `
  <...SOME FRAGMENTS LATER...>
  fragment AllCatalogueFields on Catalogue {
    id
    edit_id
    user_id
    status
    title
    description
    views
    header_image_url
    header_color
    author
    profile_picture_url
    event_date
    location
    created
    updated
    labels {
      ...AllLabelFields
    }
    listings {
      ...AllListingFields
    }
  }
  query Catalogues($id: ID, $edit_id: String) {
    catalogues(id: $id, edit_id: $edit_id) {
      ...AllCatalogueFields
    }
  }`;

  const config: AxiosRequestConfig = {
    method: "post",
    url: fetchToUrl,
    headers: {
      "Content-Type": "application/json",
    },
    data: JSON.stringify({
      query,
      variables: { id: id, edit_id: id },
    }),
  };
  let response = await axios(config);
  if (response.data.errors) return null;

  catalogue = response.data.data.catalogues[0];
  console.log("catalogue", catalogue);
  return catalogue;
};

The request it is making is to the following API endpoint

  Query: {
    catalogues: async (
      _: null,
      args: { id: string; edit_id: string }
    ): Promise<Catalogue[]> => {
      let catalogues: Catalogue[];

      // when both id and edit_are passed
      if (args.id && args.edit_id) {
        catalogues = await getFullCatalogues(args.id, "id", true);
        // the following convoluted request is the result of
        // me responding to the fact that only the edit_id was working
        if (catalogues.length === 0) {
          catalogues = await getFullCatalogues(args.edit_id, "edit_id", true);
          if (catalogues.length === 0) {
            throw new UserInputError("No catalogues found");
          }
        } else {
          catalogues = await getFullCatalogues(
            catalogues[0].edit_id,
            "edit_id",
            true
          );
        }
        console.log("catalogues", catalogues);
      } else if (args.id) {
        catalogues = await getFullCatalogues(args.id);
      } else if (args.edit_id) {
        catalogues = await getFullCatalogues(args.edit_id, "edit_id");
      } else {
        const res = await db.query(fullCatalogueQuery());
        catalogues = res.rows;
      }

      return catalogues;
    },

    ...
  },

This results in the following output within the deployed logs:

The logs show the data when the Catalogue is first created which simultaneously navigates me to the URL of "normal format" with Catalogue.id which is interpreted as /_next/data/qOrdpdpcJ0p6rEbV8eEfm/ctg/dab212a0-826f-42fb-ba21-6ebb3c1350de.json. This contains the default data when Catalogue is first generated with Catalogue.title being "Untitled List"

Before sending both requests I changed the Catalogue.title to "asd".

Notice how the request with the Catalogue.edit_id which was sent as the "normal format" was interpreted as /ctg/ee0dc1d7-5458-4232-b208-1cbf529cbf4f?edit=true. This resulted in the correct data being returned with Catalogue.title being "asd".

Yet the following request with the Catalogue.id although being of the same "normal format" never provoked any logs.

(I have tried sending the request without the params ?edit=true and the same happens)

Another important detail is that the (faulty) request with the Catalogue.id produces the (faulty) URL preview much faster than the request with Catalogue.edit_id.

My best theory as to why this is happening is that the data of the URL with Catalogue.id is somehow stored/cached. This would happen as the Catalogue is first created. In turn it would result in the old stored Catalogue.id being returned instead of making the fetch again. Whereas the Catalogue.edit_id makes the fetch again.

Refrences:

Live site: https://www.kuoly.com/

Client: https://github.com/CakeCrusher/kuoly-client

Backend: https://github.com/CakeCrusher/kuoly-backend

Anything helps, I felt like ive tried everything under the sun, thanks in advance!

Answer 1

I learned that For my purposes I had to use getServerSideProps instead of getStaticProps