1

I'm trying to implement search fuctionality in my blog project but facing problem in using variable in groq query(sanity) inside getServersideprops.

Here is my code

import React from 'react'
import { useRouter } from 'next/router'
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import Banner from '../../components/Banner'
import Header from '../../components/Header'
import { sanityClient,urlFor } from '../../sanity'
import { Post } from '../../typings'
import PostCard from '../../components/Post'
import Footer from '../../components/Footer'
import BottomNav from '../../components/BottomNav'

interface Props{
  posts:[Post];
}

export default function Search({ posts}:Props) {
 
    
  return (
    <>
    <div className='max-w-6xl mx-auto container-fix md:mb-1 '>
      <Head>
        <title>Const - Read for free</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
        <Header/>
        <Banner/>
        <PostCard posts={posts} />
        <Footer/>     
      
    </div>
    <BottomNav />
    </>
  )
}



export const getServerSideProps = async(context:any)=>{
  const search = context.query.url;
  const query = `
                  *[_type=="post" && title == $search]{
                  _id,
                  title,
                  author -> {
                  name,
                  image,
                  
                },
                _createdAt,
                description,
                mainImage,
                category,
                slug
                }`;
  const posts = await sanityClient.fetch(query);
 
  return {
    props:{
      posts
      
    }
  }
}

this is the error im getting

**Server Error ClientError: param $search referenced, but not provided **

but when the variable is repalced with actual string then I'm geeting results succesfully.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Tejender Kumar
  • 31
  • 7
  • 1
    Shouldn't it be *[_type=="post" && title == ${search}]{ - note the curley braces around "search" - the backticks give you a string template you see. – Mrk Fldig Sep 24 '22 at 09:10
  • tried this as well. error is resolved but then not getting results.it looks like while wrapping variable inside {} vlaue is getting undefind or someting else. console.log giving array[0] while wraping the variable. – Tejender Kumar Sep 24 '22 at 09:15
  • Check this out for getting query in ServerSideProps https://github.com/vercel/next.js/discussions/13309 - in short you want export async function getServerSideProps({ query }) { – Mrk Fldig Sep 25 '22 at 08:51
  • Glad it got solved, welcome to stackoverflow! – Mrk Fldig Sep 25 '22 at 08:51

1 Answers1

2

groq query doesnot pick the variable directly from declaration .need to pass the variable in sanityclient.fetch() alongside the query.

const posts = await sanityClient.fetch(query,{search:search});
Tejender Kumar
  • 31
  • 7
  • 1
    You can also pass the variable in the query itself, just make sure to explicitly indicate it's a string: `'${search}'`. – ivanatias Sep 24 '22 at 18:57