#Graphql client doesnt fetch staticly

1 messages · Page 1 of 1 (latest)

latent islandBOT
#

Hi @graceful osprey. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Next.js, if you want to fetch data at build time, you should use getStaticProps. This function runs at build time in production and generates static HTML for a page. However, in your current setup, you're fetching data inside the component itself, which means it will run on every request, not at build time.

Here's how you can modify your code to use getStaticProps:

import { datoCms } from "graphql/client";
import { StructuredText } from "react-datocms";

export const metadata = {
  title: "Kirara - About us",
};

export default function AboutPage({ about }) {
  return (
    <div className="markdown">
      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
      <StructuredText data={about?.content?.value} />
    </div>
  );
}

export async function getStaticProps() {
  const { about } = await datoCms.About();

  return {
    props: {
      about,
    },
  };
}

In this code, getStaticProps fetches the data at build time and passes it to your page component as a prop. This way, the data is fetched only once at build time, not on every request.

Please note that this approach is suitable for data that can be generated at build time and does not change often. If your data changes frequently, you might want to consider using getServerSideProps or client-side data fetching instead.

For more information, you can refer to the Next.js documentation on Data Fetching (https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props) and Upgrading from pages to app (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-6-migrating-data-fetching-methods).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@jagged atlas kapa.ai is still learning and improving, please let us know how it did by reacting below

graceful osprey
#

@latent island I use next 14

latent islandBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm sorry, but the knowledge sources provided do not contain information about Next.js version 14. The latest version mentioned in the sources is version 13.4.20.

If you're looking for specific information or guidance about Next.js version 14, I recommend checking the official Next.js documentation or their GitHub repository for the most accurate and up-to-date information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@jagged atlas kapa.ai is still learning and improving, please let us know how it did by reacting below

graceful osprey
#

@latent island

export const GraphqlClient = new GraphQLClient("https://graphql.datocms.com", {
  headers: {
    authorization: env.DATOCMS_API_KEY,
  },
  cache: "force-cache",
});

I use this code in page.tsx I want same aleternatice as getStaticServer but seemes like its runs on page request not on build time, I use next 14

import { datoCms } from "graphql/client";
import { StructuredText } from "react-datocms";

export const metadata = {
  title: "Kirara - About us",
};

export default async function AboutPage() {
  const { about } = await datoCms.About();

  return (
    <div className="markdown">
      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
      <StructuredText data={about?.content?.value} />
    </div>
  );
}

here is example