How to pass useState value to getServerSideProps in Nextjs?

Question

Hi guys so I have been on this for 4 hrs trying to filter a product. I have setState upon onClick event. I can think of or find info on changing the query. THis is my code:

export async function getServerSideProps() {
    await db.connect();
    const products = await Product.find({}).lean();
    const categories = await Category.find({}).lean();
    await db.disconnect();
    return {
        props: {
            products: products.map(db.convertDocToObj),
            categories: categories.map(db.convertDocToObj),
        },
    };
}

I have passing the state value but nothing. I think it is to provide an variable for the state and slap it in where 'meat' is, but should i dont know if i am to make serverside request that way

const products = await Product.find({ category: 'meat' }).lean();

Answer 1

Your getServerSideProps usage is correct. I would bet there is something incorrect with your data fetching.

Make sure products and categories are what you think they are before returning them in props here. I am unfamiliar with convertDocToObj method but if that returns a promise you will have to resolve that before returning from getServerSideProps.

Once products and categories are valid they will be available as props in your component:

function Page({ products, categories }) {
  // Render data...
}