Question 267467 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – sanity groq not returning queried data

Im having trouble using groq to fetch data. All my other groq queries work expect this one. The data im trying to query works with the sainty groq vs plugin when i manually set the $slug variable but returns undefined in my web app.

query:

export async function getPost(slug: string): Promise<BlogPost> {
  
  console.log('fetching post data');

  const data = createClient(clientConfig).fetch(
    groq`*[_type == "blogPost" && slug.current == $slug][0]{
      ...,
      author->,
      categories[]->,
      "mainImage": mainImage.asset-> url,
      'slug': slug.current,
      title,
      description,
    }`, 
    { slug: slug },
    {cache: 'no-store'},
  )
}

client config:

import {createClient} from 'next-sanity';
import {apiVersion, dataset, projectId} from '../env';

const config ={
    projectId: projectId,
    dataset: dataset,
    apiVersion: apiVersion,
    useCdn: false,
};

export default config;

env:

export const apiVersion =
  process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-09-14'

export const dataset = assertValue(
  process.env.NEXT_PUBLIC_SANITY_DATASET,
  'Missing environment variable: NEXT_PUBLIC_SANITY_DATASET'
)

export const projectId = assertValue(
  process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  'Missing environment variable: NEXT_PUBLIC_SANITY_PROJECT_ID'
)

export const useCdn = false

function assertValue<T>(v: T | undefined, errorMessage: string): T {
  if (v === undefined) {
    throw new Error(errorMessage)
  }

  return v
}

the page that needs the data

import React from 'react';
import { getPost } from '@/sanity/schemas/sanity-utils';
import Image from 'next/image';
import {BlogPost} from '@/typings';

type Props = {
    params: {post: string};
};

export default async function post({ params }: Props[]) {


    const slug = params.slug;
    const post = await getPost(slug);
    console.log(post);

  return (
    <article className='px-10 pb-28'>
        <section className='space-y-2 border border-gray-500 text-white'>
            <div className='relative min-h-56 flex flex-col md:flex-row justify-between'>
                <picture className='absolute top-0 w-full h-full opacity-10'>
                    <Image
                        className='object-cover object-center mx-auto'
                        src={post.mainImage}
                        alt={post.author.name}
                        fill
                    />
                </picture>
                <section className='p-5 bg-grey w-full'>
                    <div className='flex flex-col md:flex-row justify-between gap-y-5'>
                        <div>
                            <h1 className='text-4xl font-extrabold'>
                                {post.title}
                            </h1>

                            <p>
                                {new Date(post._createdAt).toLocaleDateString()}
                            </p>
                        </div>
                        <div className='flex items-center space-x-2'>
                            <Image
                                className='rounded-full'
                                src={post.author.image}
                                alt={post.author.name}
                                height={40}
                                width={40}
                            />
                            <div className='w-54'>
                                <h3 className='text-lg font-bold'>
                                    {post.author.name}
                                </h3>
                                <div>
                                    {/* author bio */}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </article>
  )
}

Iv tried changing the $slug to ‘slug’ , ‘$slug’, slug, params.slug, ‘params.slug’, ‘$params.slug’, $params.slug. I tried chaning the export default async function post({ params }: Props[]) to {params: {slug} }: Props}

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out, man do I feel dumb I forgot to actually return the data from the function that contained the query lol.


  2. 0

    There might be multiple reason for this, but you should check the following steps:

    1. Most suspicious: Make sure matching your passing argument name and properties:

    enter image description here

    It might be in posts?/[slug]/page.tsx:

    type Props = {
    params: {slug: string};
};
export default async function post({ params }: Props) {
    const slug = params.slug;
    const post = await getPost(slug);
    ...
    1. Log and make sure the argument is presence in the getPost function.
      console.log('Slug argument: ', slug);
    1. Lesser: Might try your argument passing without an alias in the curly brackets { slug }:
      const data = createClient(clientConfig).fetch(
    groq`*[_type == "blogPost" && slug.current == $slug][0]{
      ...,
      author->,
      categories[]->,
      "mainImage": mainImage.asset-> url,
      'slug': slug.current,
      title,
      description,
    }`, 
    { slug },
    {cache: 'no-store'},
  )
    1. If you pass the previous steps successfully, you should run the groq query individually and see the result in the Vision plugin on the Sanity studio:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search