Debugging

Debugging components

This will obviously depend on the type of components and errors you're facing. The principle of working from outside -> in will help, though:

• Start by logging data in app/routes/$.tsx and returning null instead of the Template component

  app/routes/$.tsx

  export default function Route() {
    const preview = useContext(PreviewDataContext)
    const data = useSanityData()
    const Template = resolveRouteTemplate(data)
   
    // Log the data in the browser to see what the templates are getting
    if (
      env.NODE_ENV === 'development' &&
      typeof window !== 'undefined' &&
      window
    ) {
      console.log({ data, preview })
    }
   
    // Skip rendering the template for now
    return null
   
    // ...
  }

• If working, return the template but comment its biggest parts.

  • Here's an example with ProductTemplate, we start by commenting the template-specific components and hook calls:

  const ProductTemplate = (props: ProductData) => {
    // const { recommendationsBySanityId } = useSanityData()
    // const docId = undraftId(props.routeData._id)
    // const recommendedProducts =
    //  recommendationsBySanityId[
    //    (parseLocalizedId(docId)?.baseId as SanityProductId) || docId
    //  ]
    return (
      <GlobalLayout {...props}>
        {/* <ProductHero {...props.routeData} /> */}
        {/* <RecommendedProductsCarousel products={recommendedProducts} /> */}
      </GlobalLayout>
    )
  }

• Then start uncommenting part-by-part until you find the point where it breaks

• Then go into the component, hook or function that is breaking and start the outside -> in process there

Debugging GROQ queries

Debugging queries is one of the hardest things to do in Sanity: they can be extremely long, errors aren't 100% clear, there's no GROQ formatter for easier parsing, etc.

The best way we've found to debug them, so far, is to:

• In runRouteQuery (/app/routing/helper.queries.ts), write the query and params to files so it's easier to parse them
  • There's already an example there for it:

    // For debugging:
    fs.writeFileSync('query.groq', prepareRouteQuery(query, isPreview))
    fs.writeFileSync('query.params.json', JSON.stringify(params, null, 2))
• Copy the query and params into the Vision tool inside of the Studio
  • http://localhost:3000/manage/vision (opens in a new tab)
• If it's working, the issue is probably somewhere in the routeLoader code, not the query itself
• Otherwise, start ripping its pieces apart and seeing what works
  • Start from outside -> in
  • First try the filters
  • Then the top-level projections,
  • Then the nested projections, and so forth