Get help on Discord

How to pass URL parameter to Sanity GROQ query in Next.js getServerSideProps?

4 replies
Last updated: Aug 6, 2022
Hey everyone. Quick question, how can I set params for a query from a URL parameter? Say I have this url: 
orders?orderId=778
and I want to fetch the order 778 from Sanity:
export const getServerSideProps = async () => {
  const orderDetails = await sanityClient.fetch(
    `*[_type == "orders" && orderId.current == $orderId][0]{...}`
  )
  return {
    props: {
      orderDetails,
    },
  }
}
I know I can use 
router.query
in Next.js so 
const { orderId } = router.query
will read the URL param, but I can’t seem to be able to pass it as params to the groq query.
AI Update

You're really close! The key is to pass the parameters as the second argument to the fetch() method. Here's how to fix your code:

export const getServerSideProps = async ({ query }) => {
  const { orderId } = query
  
  const orderDetails = await sanityClient.fetch(
    `*[_type == "orders" && orderId.current == $orderId][0]{...}`,
    { orderId } // Pass parameters as second argument
  )
  
  return {
    props: {
      orderDetails,
    },
  }
}

The important bits:

  1. In getServerSideProps, you get the URL parameters from the context.query object (not router.query - that's for client-side components)
  2. Pass your parameters as an object in the second argument to sanityClient.fetch()
  3. In your GROQ query, reference the parameter with the $ prefix

This approach is much safer than string interpolation because the Sanity client automatically handles proper escaping, preventing GROQ injection attacks and syntax errors from special characters.

If you need to handle cases where orderId might not be present in the URL, you can add a check:

export const getServerSideProps = async ({ query }) => {
  const { orderId } = query
  
  if (!orderId) {
    return { notFound: true }
  }
  
  const orderDetails = await sanityClient.fetch(
    `*[_type == "orders" && orderId.current == $orderId][0]{...}`,
    { orderId }
  )
  
  return {
    props: {
      orderDetails,
    },
  }
}
Show original thread
4 replies
Parameters are the second argument to 
fetch()
, so:
sanityClient.fetch(
  `*[_type == "orders" && orderId.current == $orderId][0]{...}`,
  {orderId: router.query.orderId}
)
Hi
user Z
, thanks! I think I already try that but it'll check again. I remember getting an error about using hook calls within 
getServerSideProps
Yeah, you need to pick 
query
from the context argument 
getServerSideProps
gets - something like:

export const getServerSideProps = async (context) => {
  const orderDetails = await sanityClient.fetch(
    `*[_type == "orders" && orderId.current == $orderId][0]{...}`,
    {orderId: context.query.orderId}
  )
  return {
    props: {
      orderDetails,
    },
  }
}
Ahhh, the context! I keep forgetting about it. It works now, thank you!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?