GraphQL works fine on repo GraphiQL but on NextJS method call return Unable to parse fetch query Invalid fetch parsing Exception

Developing with Prismic
1

Hi! This is my first time using GraphQL on Prismic and as I mentioned on GraphiQL, syntax and retrieved data looks great but when I make the request from my NextJS code, I get an error of:
{"type":"api_validation_error","message":"Unable to parse fetch query Invalid fetch parsing Exception.\n\nInvalid input '(', expected AlphaNum, AlphaChar, '_', '-', WS or bracketed

The error basically says that my " ( " character can't be parsed, if I remove the part of the code that uses the parenthesis, everything works fine.

My query is this:

{
    allBlogs(first: 5, where: {category: "Yel_oxEAAC0A87ry"}) {
      edges {
        node {
          _linkType
          _meta {
            id
            uid
            type
          }
          meta_title
          meta_description
          featured_image
          category {
            _linkType
            __typename
          }
        }
      }
    }
  }

and it appears that the problem is running (first: 5, where: {category: "Yel_oxEAAC0A87ry"}) on my code...

Thanks in advance!

3

Hey @fernando.ferreyra, the search parameters seem just fine. Have you used the graphql explorer from your repository? Accessible at https://your-repo-name.prismic.io/graphql.

This can help you validate your queries before adding them to your project.

4

@Pau hello! Yes the first thing I did was validate the query and the results with the graphql explorer from my repo.
(I'm trying to upload a screenshot but the dialog box freeze)

I don't know if this is relevant or not but the request from my code it's been made tohttps://your-repo-name.cdn.prismic.io/api/v2/documents/search?graphQuery=.....

And with this I get:

{"type":"api_validation_error","message":"Unable to parse fetch query Invalid fetch parsing Exception.\n\nInvalid input '(', expected AlphaNum, AlphaChar, '', '-', WS or bracketed (line 2, column 13):\n allBlogs(first: 5, where: { category: "Yel_oxEAAC0A87ry" }) {\n ^\n\n6 rules mismatched at error location:\n /InputLine/ /Docs/ /bracketed/ /$anonfun/ +:-12 /Doc/ /Key/ capture:-8 / +:-8 / | / AlphaNum:\n /InputLine/ /Docs/ /bracketed/ /$anonfun/ +:-12 /Doc/ /Key/ capture:-8 / +:-8 / | / AlphaChar:\n /InputLine/ /Docs/ /bracketed/ /$anonfun/ +:-12 /Doc/ /Key/ capture:-8 / +:-8 / | / ''\n /InputLine/ /Docs/ /bracketed/ /$anonfun/ +:-12 /Doc/ /Key/ capture:-8 / +:-8 / | / '-'\n /InputLine/ /Docs/ /bracketed/ /$anonfun/ +:-12 /Doc/ /WS/ * / [ \t \n]\n /InputLine/ /Docs/ /bracketed/ /$anonfun/ +:-12 /Doc/ /bracketed/ "{" / '{'\n"}

Thanks!

5

That's the issue. GraphQuery uses GraphQL syntax but is not GraphQL.
You need to send the GraphQL requests to: https://your-repo-name.prismic.io/graphql
And GraphQueries are sent to the REST API of your repo: https://your-repo-name.cdn.prismic.io/api/v2/

6

Ok... but for the GraphQueries sent to the REST API of my repo (https://your-repo-name.cdn.prismic.io/api/v2/). Is not possible to use arguments/parameters?
e.g.: I want the first 5 blog posts from a specific blog category.

In https://your-repo-name.prismic.io/graphql I can run the query that I mentioned in my first post but I can't do the same with GraphQuery. Is that correct?

Thanks!

7

I see. It is possible to add params as you'd do in GraphQL, but not in GraphQuery. You'd need to add them to the REST query instead:

That's correct, it's not possible to test GraphQueries in the GraphiQL explorer. But that doesn't mean you can not test them!

Use the REST API browser, it requires a bit more configuration. Check out how you can achieve this here: Use GraphQuery with the Rest API

8

Pau, yes, I've read those docs but I don't quite understand how I can retrieve the first "n" elements (in this case blog posts) without retrieving ALL posts.

How or where can I add the params in the REST API so I can accomplish to get for example the first (or last) 5 posts from a particular blog category?

This is my code:

client.getAllByType(
      'blog',  
      {
        predicates: [prismic.predicate.at('document.type',"blog"), prismic.predicate.at("my.blog.category", category_uid)] 
      }
    )

where category_uid is the id of a certain blog_category

Thanks again!

9

There are two options to limit the response:

1. getAllByType() with limit:
getAllByType() will fetch all documents. Setting pageSize will decrease the page size, but the function will still query every page available. To limit the number of documents returned, the limit option can be passed. Once the function reaches that limit, it will stop requesting pages.

await client.getAllByType('blog', { limit: 3 })

2. getByType() with pageSize:
getByType() with pageSize will also limit the results. You will receive pagination metadata along with the data using this method, however, so you’ll need to access the results using res.results .

await client.getByType('blog', { pageSize: 1 })