Theo's Typesafe Cult•3y ago

getStaticProps runs multiple times!

Have no idea why this happens, few threads on github but no solution it seems. When it runs, only one of the runs has the proper params, the rest are just undefined.

//[pid].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';

import axios from '../../utils/axiosBase';

const getPost = (pid) => {
    return axios.get('/get-post', { params: { pid } });
};

const Post = ({ post }) => {
    const { data } = useQuery(['get-post'], getPost, { initialData: post });
    return <p>h</p>;
};

export const getStaticProps: GetStaticProps = async (context) => {
    const post = await getPost(context.params.pid);
    return {
        props: { post: post.data }
    };
};

export const getStaticPaths: GetStaticPaths = async () => {
    return {
        paths: [],
        fallback: 'blocking'
    };
};

export default Post;

//[pid].tsx
import { GetStaticPaths, GetStaticProps } from 'next';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';

import axios from '../../utils/axiosBase';

const getPost = (pid) => {
    return axios.get('/get-post', { params: { pid } });
};

const Post = ({ post }) => {
    const { data } = useQuery(['get-post'], getPost, { initialData: post });
    return <p>h</p>;
};

export const getStaticProps: GetStaticProps = async (context) => {
    const post = await getPost(context.params.pid);
    return {
        props: { post: post.data }
    };
};

export const getStaticPaths: GetStaticPaths = async () => {
    return {
        paths: [],
        fallback: 'blocking'
    };
};

export default Post;

While we're at it, I don't totally understand the dataflow here (I followed the SSG Query pattern suggested on the tanstack page) so any explanation would be super appreciated.

12 Replies

metalpipemomoOP•3y ago

I'm thinking the getStaticPaths configuration might be doing it

John•3y ago

John•3y ago

i feel like you are doing a foot-gun Not gonna lie id just fetch it on the client as its quite dynamic page.

metalpipemomoOP•3y ago

I switched to just fetching client side I think this is a react query issue/some weird behaviour

Develliot•3y ago

One is getting post one is getting post.data

metalpipemomoOP•3y ago

First request resolves perfectly, then it keeps querying

Develliot•3y ago

I think you just want data: {post} for them to be equal Deconstruct inside the page component Also what is the point in getting server side and the browser side, you just need one tbh You just need to set up the cache invalidation rules properly, don't use tanstack query to do a second query. The get static paths needs access to 'all posts' so it can loop through them and build all the paths.

metalpipemomoOP•3y ago

ok hold on i scaled it way the heck down because my brain = 🥟 right now

metalpipemomoOP•3y ago

i basically ditched the api route i had and implemented it in gSSP

metalpipemomoOP•3y ago

i guess consuming an api i made inside of getserversideprops (or even ssg?) apparently repeats the request tons of times is there a better way to have done this sad

dont think im at the point where I can understand this yet :(

Develliot•3y ago

Checkout the ISR example on next JS docs, I'm assuming you're doing all this because you want all the benefits of a static site but built from CRM or a relatively fixed bit of backend data that won't change live very much

metalpipemomoOP•3y ago

Yeah i'll definitely look into this to optimize after i get the mvp out For now, is there a reason InferGetServerSidePropsType doesn't pick up the type of my prop?

export default function Post(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
    const post = props.post as Post;
    return (
        <div>
            <p>{post.title}</p>
            <p>{post.body}</p>
            {post.images.map((img, index) => {
                return (
                    <Image
                        src={img.url}
                        width={img.width}
                        height={img.height}
                        key={index}
                    />
                );
            })}
        </div>
    );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
    const { pid } = context.params;
    const post = await prisma.post.findFirst({
        where: { id: parseInt(pid as string) },
        include: {
            images: true
        }
    }) as Post;
    return {
        props: { post }
    };
};

export default function Post(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
    const post = props.post as Post;
    return (
        <div>
            <p>{post.title}</p>
            <p>{post.body}</p>
            {post.images.map((img, index) => {
                return (
                    <Image
                        src={img.url}
                        width={img.width}
                        height={img.height}
                        key={index}
                    />
                );
            })}
        </div>
    );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
    const { pid } = context.params;
    const post = await prisma.post.findFirst({
        where: { id: parseInt(pid as string) },
        include: {
            images: true
        }
    }) as Post;
    return {
        props: { post }
    };
};

props is just { [key: string]: any; }

Gaming

Programming

getStaticProps runs multiple times!