Next.js Discord

Discord Forum

Reduce api calls

Unanswered
kubas posted this in #help-forum
Open in Discord
kubasOP
Hi! This is my /blog page code:
"use client";
import BlogCard from '@/components/blog/PostCard';
import { GraphQLClient, gql } from 'graphql-request';
import styles from './blog.module.scss';
import { useEffect, useState } from 'react';

const hygraphContentApi = "VALID_URL";

const graphcms = new GraphQLClient(hygraphContentApi);

const QUERY = gql`
  query {
    posts {
      title
      createdAt
      shortDescription
      slug
      author {
        name
        picture {
          url
        }
      }
      coverImage {
        url
      }
    }
  }
`;

interface Post {
  title: string;
  createdAt: string;
  slug: string;
  shortDescription: string;
  author: {
    name: string;
    picture: {
      url: string;
    };
  };
  coverImage: {
    url: string;
  };
}

const Home = () => {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    console.log("ea");
    const fetchData = async () => {
      console.log('ee');
      try {
        const response = await graphcms.request<{ posts: Post[] }>(QUERY);
        const sortedPosts = [...response.posts].sort((a, b) => {
          const dateA: Date = new Date(a.createdAt);
          const dateB: Date = new Date(b.createdAt);
          return dateB.getTime() - dateA.getTime();
        });
        setPosts(sortedPosts);
      } catch (error) {
        console.error('Error fetching posts:', error);
      }
    };
  
    fetchData();
  }, []);

  console.log(posts);

  return (
    <main>
      <div className={styles.blogCardsContainer}>
        {posts.length > 0 ? (
          posts.map((post) => (
            <BlogCard key={post.slug} post={JSON.stringify(post)} />
          ))
        ) : (
          <p>Loading...</p>
        )}
      </div>
    </main>
  );
};

export default Home;

How can I do to reduce api usage? Is there any way to do this on the server side? I mean the code would execute the api call only when we add a new post. I use hygraph, next js with ./app.

8 Replies

kubasOP
Maybe I need to use hygraph webhooks
I don't know, can someone help me?
Rafael Almeida
change this component to be a RSC (remove 'use client') and you will able to fetch this data only in the server
by default this segment will be cached so your API will be hit only once
you can then use on-demand revalidation (https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#on-demand-revalidation) to revalidate this path when you have a new post
kubasOP
So my code should look like this:
import BlogCard from '@/components/blog/PostCard';
import { GraphQLClient, gql } from 'graphql-request';
import styles from './blog.module.scss';

const hygraphContentApi = "valid_url";

const graphcms = new GraphQLClient(hygraphContentApi);

const QUERY = gql`
  query {
    posts {
      title
      createdAt
      shortDescription
      slug
      author {
        name
        picture {
          url
        }
      }
      coverImage {
        url
      }
    }
  }
`;

interface Post {
  title: string;
  createdAt: string;
  slug: string;
  shortDescription: string;
  author: {
    name: string;
    picture: {
      url: string;
    };
  };
  coverImage: {
    url: string;
  };
}

const Home = async() => {
  const response = await graphcms.request<{ posts: Post[] }>(QUERY);
  const posts = [...response.posts].sort((a, b) => {
    const dateA: Date = new Date(a.createdAt);
    const dateB: Date = new Date(b.createdAt);
    return dateB.getTime() - dateA.getTime();
  });
  return (
    <main>
      <div className={styles.blogCardsContainer}>
        {posts.length > 0 ? (
          posts.map((post) => (
            <BlogCard key={post.slug} post={JSON.stringify(post)} />
          ))
        ) : (
          <p>Loading...</p>
        )}
      </div>
    </main>
  );
};

export default Home;

But I don't quite understand how to do on-demand revalidation with graphql. Can you help me with this?
i removed "use client" and i remove useState because i cant use state in RSC
ping me when you have time, I will probably write back tomorrow