#ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values

93 messages · Page 1 of 1 (latest)

hardy tiger
#

I am using sanity, also if you need more information I will provide it as soon as possible. When I go to http://localhost:3000/api/getComments it writes me that error:

ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values.

fetchComments.ts

import { Comment } from "../typings"

export const fetchComments = async (tweetId: string) => {
     const res = await fetch(`/api/getComments?tweetId=${tweetId}`)

     const comments: Comment[] = await res.json()

     return comments
}```
getComments.ts
```tsx
import type { NextApiRequest, NextApiResponse } from "next";
import { groq } from "next-sanity";
import { sanityClient } from "../../sanitytwitter/sanity";
import { Comment } from "../../typings";

const commentQuery = groq`
*[_type == "comment" && references(*[_type == 'tweet' && _id == $tweetId]._id )]
{
    _id,
    ...
} | order(_createdAt desc)
`

type Data = Comment[]

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
) {
    const { tweetId } = req.query;

    const comments: Comment[] = await sanityClient.fetch(commentQuery, {
        tweetId,
    })

    res.status(200).json(comments)
}```
mighty grail
hardy tiger
#

thats why im here

mighty grail
#

ohhh lol did i just stumble your question

hardy tiger
mighty grail
#

ohh yea

#

import { Comment } from "../typings"

export const fetchComments = async (tweetId: string) => {
const res = await fetch(/api/getComments?tweetId="${tweetId}")

 const comments: Comment[] = await res.json()

 return comments

}

hardy tiger
#

me and him as it seems, are both following a tutorial,

mighty grail
#

add qoute into your ${tweetId} id

hardy tiger
mighty grail
#

hmmm

#

where is the error occuring ??

#

like client side ?

hardy tiger
#

Server Error
ClientError: Unable to parse value of "$tweetId=undefined". Please quote string values.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

#
  response: {
    body: { error: [Object] },
    url: "https://j5iwh3uw.api.sanity.io/v2021-10-21/data/query/production?query=%0A%0A*%5B_type%20%3D%3D%20'comment'%20%26%26%20references(*%5B_type%20%3D%3D%20'tweet'%20%26%26%20_id%20%3D%3D%20%24tweetId%5D._id)%5D%0A%7B%0A%20%20%20%20_id%0A%20%20%20%20...%0A%7D%20%7C%20order%5B_createdAt%20desc%5D%0A%0A&%24tweetId=undefined",
    method: 'GET',
    headers: {
      'content-type': 'application/json; charset=utf-8',
      'content-length': '129',
      'x-ratelimit-remaining-second': '498',
      'x-ratelimit-limit-second': '500',
      'ratelimit-limit': '500',
      'ratelimit-remaining': '498',
      'ratelimit-reset': '1',
      date: 'Sun, 29 Jan 2023 18:05:27 GMT',
      'server-timing': 'api;dur=0',
      'x-sanity-shard': 'gcp-eu-w1-01-prod-1041',
      'x-served-by': 'gradient-query-5f768df9c8-lmqhp',
      'strict-transport-security': 'max-age=15724800; includeSubDomains',
      vary: 'origin',
      xkey: 'project-j5iwh3uw, project-j5iwh3uw-production',
      via: '1.1 google',
      'alt-svc': 'h3=":443"; ma=2592000,h3-29=":443"; ma=2592000'
    },
    statusCode: 400,
    statusMessage: 'Bad Request'
  },
  statusCode: 400,
  responseBody: '{\n' +
    '  "error": {\n' +
    '    "description": "Unable to parse value of \\"$tweetId=undefined\\". Please quote string values.",\n' +
    '    "type": "httpBadRequest"\n' +
    '  }\n' +
    '}',
  details: {
    description: 'Unable to parse value of "$tweetId=undefined". Please quote string values.',
    type: 'httpBadRequest'
  },
  page: '/api/getComments'
}```
mighty grail
#

ohhh is this the dynamic api ?

#

the one with [getComments].js?

hardy tiger
#

yes

mighty grail
#

i mean the file name?

hardy tiger
#

yes

mighty grail
#

ok

#

export const fetchComments = async (tweetId: string) => {
     const res = await fetch(`/api/${tweetId}`)

     const comments: Comment[] = await res.json()

     return comments
}```
#

try this

hardy tiger
#

so odd the same error happens

mighty grail
#

something like this

hardy tiger
#

its using sanity so i dont think it needs that

#

right?

mighty grail
#
import { groq } from "next-sanity";
import { sanityClient } from "../../sanitytwitter/sanity";
import { Comment } from "../../typings";

const commentQuery = groq`
*[_type == "comment" && references(*[_type == 'tweet' && _id == $tweetId]._id )]
{
    _id,
    ...
} | order(_createdAt desc)
`

type Data = Comment[]

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
) {
    const { tweetId } = req.query.getComments;

    const comments: Comment[] = await sanityClient.fetch(commentQuery, {
        tweetId,
    })

    res.status(200).json(comments)
}```
mighty grail
hardy tiger
#

i have made it exactly like this guy
https://youtu.be/rCselwxbUgA?t=7490

📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

I asked Sanity to hook up some free stuff for this video... They made a custom 🔥 boosted free plan 👉 https://www.sanity.io/sonny

❗️Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://ww...

▶ Play video
mighty grail
hardy tiger
#

🤷‍♂️

mighty grail
#

maybe that is allowed if not dynamic api

hardy tiger
#

oh well thats what happens when you are in tutorial hell

#

you have no idea whats going on

#

so cant fix it

#

oh well i give up, after doing 2 hours of the video,

mighty grail
#

isnt it because the value is undifined?

#

@hardy tiger

This error message you mentioned earlier "Unable to parse value of "$tweetId=undefined". Please quote string values." is related to the fact that the tweetId variable is not passed correctly to the API endpoint and it's value is undefined or it is not being passed at all.
You should check that the tweetId variable being passed as an argument to this function is defined and has a value before calling this function.

#

chat gpt answer

#

try if you supply like the acctual tweetId that you will need to supply

hardy tiger
#

if i assing a value it works

#

but the whole point is that it does it automatically

mighty grail
#

export const fetchComments = async (tweetId: string) => {
     const res = await fetch(`/api/getComments?tweetId=${tweetId}`)

     const comments: Comment[] = await res.json()

     return comments
}``` where do you get the ``tweetId`` ?
#

it is unfined forsome reason

#

if it is on context or state make sure your browser do not reload cause state will be lost

hardy tiger
#
export type CommentBody = {
  comment: string;
  tweetId: string;
  username: string;
  profileImg: string;
};

export interface Comment extends CommentBody {
  _createdAt: string;
  _id: string;
  _rev: string;
  _type: "comment";
  _updatedAt: string;
  tweet: {
    _ref: string;
    _type: "reference";
  };
}
mighty grail
#

other than that it is just finding why your tweetId is undifined

hardy tiger
#

i gota go well talk later

#

thank you

hardy tiger
mighty grail
#

idk .find the part where it stores twitterId see of that contains data

hardy tiger
#

it dosnt

hardy tiger
mighty grail
#

where do you get the twitterId?

#

is it entered from the input box ?

#

the link of your browser?

hardy tiger
#

from sanity db

mighty grail
#

do you have this in github?

hardy tiger
#

the project?

#

📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode

I asked Sanity to hook up some free stuff for this video... They made a custom 🔥 boosted free plan 👉 https://www.sanity.io/sonny

❗️Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://ww...

▶ Play video
#

you can see here what i have done

#

it has timestamp

mighty grail
mighty grail
#

if you store it in db are you getting it correctly ? cause it is undifined

hardy tiger
#

as it seems no

mighty grail
#

that is just the question maybe you arent finished with the tutorial yet 😂

hardy tiger
#

had some typos

mighty grail
#

cool

hardy tiger
#

my ass

#

didnt work

mighty grail
#

lol

#

what would he the example link on the client side?

#

?

hardy tiger
#

getComments

mighty grail
hardy tiger
#

api

mighty grail
#

i mean in browser

hardy tiger
mighty grail
#

clientSide

hardy tiger
#

what about it?

mighty grail
#

ohh this must be an api method of sort

hardy tiger
#

this is what happens when you use old tutorials