Error.invalid json response Unexpected token T in JSON at position 0 sanity nextjs typscript

Question

hey i guys i have a question i did the build with react and typscript and sanity cms but the problems is when im trying to deploy the build to varcel it keeps rejecting it sayning that FetchError: invalid json response body at https://portfolio2-1-wn3v.vercel.app/api/getExperience reason: Unexpected token T in JSON at position 0 while it works on my local machine it find all the data and everything ... i read that it might be a problem somewhere down the line with getStaticProps or when fetching json and yes i did change the enviroment varibals from base_url in http 3000 to the varcel ones but other than that i have no idea what else i should do .... if anyone has any expirince with this kind of errors ? here is my code for the

`import {Experience} from '../typings'
export const fetchExperiences = async () =>{
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/getExperience`)
    const data = await res.json()
    const projects:Experience[] = data.experience

   
    return experience
}`

the getExercise.ts file has all the api request

import type{NextApiRequest,NextApiResponse} from 'next'
import {groq} from 'next-sanity';
import {sanityClient} from '../../sanity';
import {Experience} from '../../typings'
const query = groq`
*[_type == "experience"]{
    ...,
    technologies[]->
}
`;
type Data ={
    experience:Experience[]
}
export default async function handler(
    req:NextApiRequest,
    res:NextApiResponse<Data>,
){
    const experience:Experience[]= await sanityClient.fetch(query)
    res.status(200).json(JSON.parse(JSON.stringify({experience})))
}

and this is the index.ts file part

export const getStaticProps: GetStaticProps<Props> = async() => {
  const experience : Experience[] = await fetchExperiences();
  const skills : Skill[] = await fetchSkills();
  const projects : Project[] = await fetchProjects();
  const socials : Social[] = await fetchSocials();
  return{
    props:{
      experience,
      skills,
      projects,
      socials,
    },
    revalidate:10
  }
}

Charles Ouverleaux · Answer 1 · 2022-10-26T12:32:36.053

The error link you see (https://portfolio2-1-wn3v.vercel.app/api/getExperience) is the preview deployment link from vercel. That means, everytime you deploy to vercel it will create this preview link: https:// yourappname-(some unique deployment link).vercel.app.

However, in your api you pass ${process.env.NEXT_PUBLIC_BASE_URL} which will work on your local and probable on production, but it will not on your preview deployments (staging).

To avoid this, unfortunately you cannot only give /api/getExperience as only absolute URL's are supported. Therefore, I suggest the following approach by avoiding the API call as suggested in the [nextjs docs][1]:

you create an experience-queries.ts file in lib/
you add your GROQ query in there

export const getExperiences = groq`*[_type == "experience"]{..., technologies[]->}`

In index.ts, in getStaticProps you call getExperiences

const experiences = await sanityClient.fetch(getExperiences);

Note: Be careful with naming between experience (one single item) and experiences (a list of items) -> make sure you name if as you intend to get them. [1]: https://nextjs.org/docs/basic-features/data-fetching/get-static-props#write-server-side-code-directly

i managed to fix it by changing the code in index.js i diretcly called sanity queries export const getStaticProps: GetStaticProps = async() => { const res = await sanityClient.fetch(query) const experience:Experience[]= res const res2= await sanityClient.fetch(query2) const projects: Project[]=res2 const res3 = await sanityClient.fetch(query3) const skills: Skill[]= res3 const res4 = await sanityClient.fetch(query4) const socials: Social[]= res4 — Nejc Lampič, Oct 25 '22 at 12:11

Error.invalid json response Unexpected token T in JSON at position 0 sanity nextjs typscript

1 Answers1