Next.js Discord

Discord Forum

Simple Groq Query help (Sanity.io)

Unanswered
Standard Chinchilla posted this in #help-forum
Open in Discord
Standard ChinchillaOP
how can I fix this query to return products which contain a category which matches the passed in string?

export async function getProducts(category: string): Promise<Post[]> {
  return client.fetch(
    groq`
    *[_type == "product" && ${category} in categories ]{
        _id,
        title,
        slug,
        "image": mainImage.asset->url,
        url,
        body,
      }
    `,
    { next: { revalidate: 20 } } 
  );
}

10 Replies

Standard ChinchillaOP
my schema looks like this:

import { defineField, defineType } from "sanity";

export default defineType({
  name: "product",
  title: "Product",
  type: "document",
  fields: [
    defineField({
      name: "title",
      title: "Title",
      type: "string",
    }),
    defineField({
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    }),

    defineField({
      name: "mainImage",
      title: "Main image",
      type: "image",
      options: {
        hotspot: true,
      },
      fields: [
        {
          name: "alt",
          type: "string",
          title: "Alternative Text",
        },
      ],
    }),
    defineField({
      name: "categories",
      title: "Categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    }),

    defineField({
      name: "body",
      title: "Body",
      type: "array",
      of: [{ type: "block" }],
    }),
  ],

  preview: {
    select: {
      title: "title",
      media: "mainImage",
    },
  },
});
Asian black bear
You will need to use a query parameter as documented here: https://www.sanity.io/docs/js-client#performing-queries
This code is actually having an error
export async function getProducts(category: string): Promise<Post[]> {
  return client.fetch(
    groq`
    *[_type == "product" && ${category} in categories ]{
        _id,
        title,
        slug,
        "image": mainImage.asset->url,
        url,
        body,
      }
    `,
    { next: { revalidate: 20 } } // This does not go here, it *shouold* be the groq query parameters 
  );
}
The groq thing is not a template string, so this does not work: && ${category} in, it needs to be && $category in
So maybe a thing like 
export async function getProducts(category: string): Promise<Post[]> {
  return client.fetch(
    groq`
    *[_type == "product" && $category in categories ]{
        _id,
        title,
        slug,
        "image": mainImage.asset->url,
        url,
        body,
      }
    `,
    {category: 'cool-and-fun-widgets'}
  );
}
@Standard Chinchilla good luck!
Standard ChinchillaOP
that actually fixed the other error I was getting so thank you
Standard ChinchillaOP
this was the solution

export async function getProducts(category: string): Promise<Post[]> {
  return client.fetch(
    groq`
    *[_type == "product" && count((categories[]->title)[@ in [$cat]]) > 0 ]{
      _id,
      title,
        categories,
      slug,
      "image": mainImage.asset->url,
      url,
      body,
    }
    `,

    { cat: category, next: { revalidate: 20 } }
  );
}