fix: Hydration mismatch (#3)

CHANGELOG.md

@@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fix hydration mismatch on PLPs at `?page=1` pagination
 - A bugged vertical gap with the `EmptyState` component inside the cart ([#20](https://github.com/vtex-sites/gatsby.store/pull/20)).
 - Some pages missing component styles because they weren't imported ([#20](https://github.com/vtex-sites/gatsby.store/pull/20)).
 - Fix Storybook initialization (#492)

src/components/sections/ProductGallery/ProductGallery.tsx

@@ -1,4 +1,4 @@
-import { usePagination, useSearch } from '@faststore/sdk'
+import { useSearch } from '@faststore/sdk'
 import { GatsbySeo } from 'gatsby-plugin-next-seo'
 import { lazy, Suspense, useState } from 'react'
 import Filter from 'src/components/search/Filter'
@@ -13,6 +13,7 @@ import { mark } from 'src/sdk/tests/mark'
 import Section from '../Section'
 import EmptyGallery from './EmptyGallery'
 import { useDelayedFacets } from './useDelayedFacets'
+import { useDelayedPagination } from './useDelayedPagination'
 import { useGalleryQuery } from './useGalleryQuery'
 import { useProductsPrefetch } from './usePageProducts'
 
@@ -31,7 +32,7 @@ function ProductGallery({ title, searchTerm }: Props) {
   const { data } = useGalleryQuery()
   const facets = useDelayedFacets(data)
   const totalCount = data?.search.products.pageInfo.totalCount ?? 0
-  const { next, prev } = usePagination(totalCount)
+  const { next, prev } = useDelayedPagination(totalCount)
 
   useProductsPrefetch(prev ? prev.cursor : null)
   useProductsPrefetch(next ? next.cursor : null)

src/components/sections/ProductGallery/useDelayedPagination.ts

@@ -0,0 +1,16 @@
+import { usePagination as usePaginationSDK } from '@faststore/sdk'
+import { useEffect, useState } from 'react'
+
+export const useDelayedPagination = (totalCount: number) => {
+  const pagination = usePaginationSDK(totalCount)
+  const [pag, setPag] = useState<typeof pagination>(() => ({
+    next: false,
+    prev: false,
+  }))
+
+  useEffect(() => {
+    setPag(pagination)
+  }, [pagination])
+
+  return pag
+}