Пытался сделать пагинацию для блога. Не удается получить данные из GraphQLClient/Next.js/Hygraph (ранее Graph CMS)

Question

Как сказано в заголовке, я не могу получить данные ответа от graphql внутри компонента Home , хотя я могу получить данные из того же кода в getStacticProps. Кнопка с функцией onClick loadMore не работает. Я хочу, чтобы всякий раз, когда я нажимаю кнопку «Загрузить больше», загружались еще 3 сообщения. Когда я пытался зарегистрировать переменную graphcms внутри loadMore , я получаю неопределенный URL

      import { GraphQLClient } from 'graphql-request';
import { blogList, slugList } from './api';

const graphcms = new GraphQLClient(process.env.GRAPHQL_API);

export async function getStaticProps() {
  const skip = 0;
  const {
    postsConnection: { edges },
  } = await graphcms.request(blogList, {
    skip,
  });
  return {
    props: {
      edges,
    },
    revalidate: 30,
  };
}

export default function Home({ edges }) {    

  const [skip, setSkip] = useState(3);
  const [postList, setPostList] = useState(edges);

  const loadMore = async () => {
    const {
      postsConnection: { edges },
    } = await graphcms.request(blogList, {
      skip,
    });

    console.log(posts);
    setPostList((value) => [...value, ...edges]);
    setSkip((skip) => skip + 3);
  };

  return (
    <>
      <main>
            <div className='cards__grid'>
              {postList.map((post) => (
                <BlogCard
                  title={post.node.title}
                  src={post.node.coverPhoto.url ? post.node.coverPhoto.url : ''}
                  alt={post.node.alt}
                  key={post.node.id}
                  slug={post.node.slug}
                />
              ))}
            </div>
          

          <button type='button' className='load-more' onClick={loadMore}>
            Load more
          </button>
          
        </main>

      </div>
    </>
  )
}

index.js

      import { gql } from 'graphql-request';

export const blogList = gql`
  query Posts($skip: Int) {
    postsConnection(orderBy: datePublished_DESC, first: 3, skip: $skip) {
      edges {
        node {
          id
          title
          slug
          coverPhoto {
            url
          }
        }
      }
      pageInfo {
        pageSize
        startCursor
        endCursor
      }
    }
  }
`;

API/index.js