Get help on Discord

Troubleshooting a Query Error in Nuxt

6 replies
Last updated: Jan 16, 2023
This qroq query creates an excerpt/summary from the body text by taking the first 100 characters.
<script>

import { groq } from "@nuxtjs/sanity";

export default {

async asyncData({ $sanity }) {
`const query = groq`*[_type == "project"]{`

title,

mainImage,

createdAt,
`"excerpt": array::join(string::split((body[0].children[0].text), "")[0..100], "") + "..."}`;`

const projects = await $sanity.fetch(query);

return { projects };

},

}

</script>
Hi guys, very very minor problem here
😂 The query expects a
}
and I don't know where it's supposed to go.

ClientError
expected '}' following object body
AI Update

This is a syntax error in your GROQ query - you're missing a closing brace! Looking at your query structure, the issue is that you have a backtick in the wrong place that's breaking the template literal.

Here's the corrected version:

const query = groq`*[_type == "project"]{
  title,
  mainImage,
  createdAt,
  "excerpt": array::join(string::split((body[0].children[0].text), "")[0..100], "") + "..."
}`;

The problems in your original code were:

  1. Extra backtick after the opening brace - You had *[_type == "project"]{ which broke the template literal
  2. Missing closing brace - The GROQ projection {} needs to be properly closed before the closing backtick

Also, a friendly tip: this excerpt approach will work, but it's a bit fragile since it directly accesses body[0].children[0].text which will break if your body structure is different. You might want to consider using the pt::text() function for Portable Text, which is more robust:

const query = groq`*[_type == "project"]{
  title,
  mainImage,
  createdAt,
  "excerpt": pt::text(body)[0..100] + "..."
}`;

This will extract plain text from your entire Portable Text body field regardless of its structure, then take the first 100 characters. Much cleaner! 😊

Try putting it at the very end directly behind the last closing }
Hi,
user G
. Thank you for the response, but I'm afraid I don't quite get what you mean.
directly before the script tag
I'm afraid that didn't work.
You know, I once changed the api version in the desk to v1 and it gave errors. But any version after 2021-10-21 gives the correct output
Anybody else have this issue? I am using nuxt (vue framework).

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?