CODEWITHSUNDEEP
reactjsnext.js
jameshwart lopez
jameshwart lopez

Reputation: 3151

Prevent getStaticProps in running twice or prevent running when the context.params is empty

The screenshot below is the problem.

The screenshot below is the problem

it looks like the get getStaticProps is running twice when there is no data to context params and when there is already data in the context params.

Is there a way to not run wpgraphql query when context params are empty?

below is my file structure

enter image description here

[productSlug].js

import Layout from '@gb-components/layout'
import Product from '@gb-components/product/Product'
import { ProductContextProvider } from '@gb-contexts/ProductContext'
import { getDeliveryInformation } from '@gb-utils/queries/page'
import { getProductPageDataBySlug, getProductReviews, getProductAddOnsByProductId } from '@gb-utils/queries/product'
import { useRouter } from 'next/router'


export async function getStaticPaths() {
    return {
        paths: [],
        fallback: true,
    }
}

export async function getStaticProps(context) {

    const { categorySlug, productSlug } = context.params
    console.log('[productSlug].js getStaticProps', productSlug)

    // Fetch product data from wp site
    const { data } = await getProductPageDataBySlug(productSlug)

    // Fetch the product reviews base on sku in reviews.io api
    const reviews = await getProductReviews(data?.product.sku)

    // Fetch addons data base on product id
    const addons = await getProductAddOnsByProductId(data?.product.productId)

    const deliveryInformation = await getDeliveryInformation()
    return {
        props: { product: data?.product ? { ...data.product, ...reviews.data, ...addons?.data, ...deliveryInformation?.data } : [] }
    }


}

export default function ProductPage(props) {
    const router = useRouter()
    const { product } = props
    // If the page is not yet generated, this will be displayed
    // initially until getStaticProps() finishes running
    if (router.isFallback) {
        return <Layout>
            <div className='container'>
                Loading....
            </div>
        </Layout>
    }

    return (
        <Layout>
            <ProductContextProvider price={product.price} id={product.productId}>
                <Product product={product} />
            </ProductContextProvider>
        </Layout>
    )
}

I tried adding a check if productSlug is equal to '[productSlug]' and it works but it feels like I shouldn't be doing this because I believe I am doing something wrong that's why [productSlug].js is triggering getStaticProps twice.

if ('[productSlug]' === productSlug) {
        //Return nothing since there is nothing in the productSlug variable
        return {
            props: {}
        }
    }

Upvotes: 0

Views: 591

Answers (1)

Vijay
Vijay

Reputation: 317

    export async function getStaticProps(context) {
    const { categorySlug, productSlug } = context.params
    console.log('[productSlug].js getStaticProps', productSlug)

    // Fetch product data from wp site
    const { data } = await getProductPageDataBySlug(productSlug)

    // Fetch the product reviews base on sku in reviews.io api
    const reviews = await getProductReviews(data?.product.sku)

    // Fetch addons data base on product id
    const addons = await getProductAddOnsByProductId(data?.product.productId)

    const deliveryInformation = await getDeliveryInformation()
    return {
        props: { product: data?.product ? { ...data.product, ...reviews.data, ...addons?.data, ...deliveryInformation?.data } : [] },revalidate: 10,

    }


}

its a major issue in static file regeneration , but next js give the solution already (ISR), need to add revalidate:10 , #here 10 is 10 seconds

https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration

Upvotes: 1

Related Questions