GraphQL - Query by Content Relationship using a variable

Hello !
I am trying to filter results by content relationship field. I am following the documentation here : https://prismic.io/docs/graphql/query-the-api/filtering-by-a-content-relationshiplink-field

But instead of having the id of the doc hard coded I need to make it a variable.
I have tried to use prismic.load but I must be using it wrong as it is not working.

Here is my query:
export const query = graphql query BlogArticleQuery($lang: String!, $uid: String!, $child: String) { prismic { article: blog_article(lang: $lang, uid: $uid) { ...BlogArticle } recommendation: allBlog_recommendationss { edges { node { recommendation_title } } } categories: allBlog_categorys(where: { child: $child }) { edges { node { category_name child { ... on PRISMIC_Blog_category { category_name _linkType _meta { uid id } } } } } } } }

and inside my component I have:

useEffect(() => {
    
      prismic
        .load({
          variables: { child: article.category._meta.id }
        })
        .then(response => {
          console.log(response)
        }).catch(err=> console.log(err))
    
  })

But it is not working :frowning:

Could you help me out ? Thanks a lot in advance !

Hi @sarah.ledu, I’m sorry that this isn’t working for you. Can you share a link to your Prismic GraphQL Explorer with this query filled in. Hopefully with this we’ll be able to figure out why this isn’t working for you. Thanks!

Hi Levi,
Thanks for your answer. Here is a screenshot of my query in the explorer with one ID hard coded. !

Let me know if you need more info.
Thanks !

Hi Sarah, I’m not sure what the issue might be. I’ll need to try to recreate this locally. Can you send me your project files, so I can run your website and test this? You can either send me a zip file of your project or a link to github (or similar). If you don’t want to share it publicly here, you can send me a direct message.

Hi Levi,
I’d like to send you my zip file in a private message but it looks like I can’t send you private message. I cannot post a file either, because I’m new, it seems.
Could you tell me how to proceed ?
Thanks in advance !

@sarah.ledu I sent you a private message. Hopefully it will work now.

Hey @sarah.ledu

in order for this call to work, you would have to also pass it a BlogArticle fragment.
Can you try something like this:

import { BlogArticle as BlogArticleFragment } from '../../fragments/BlogArticle'

useEffect(() => {
      prismic
        .load({
          variables: {
            child: article.category._meta.id,
            fragments: [BlogArticleFragment]
          }
        })
        .then(response => {
          console.log(response)
        }).catch(err=> console.log(err))
    
  }, [])

In the same way, if you realise you want to play another query, import it like I imported the fragment and pass it explicitly to the load method.

Hope it helps :v:

Thanks for your reply @hugo.villain !
I haven’t succeed to make it work yet though. Do I have to add the variable $fragments somewhere in the query as well ? If yes where ?

You shouldn’t have to alter your query to make this work.
What happens when you copy-paste this portion of code?
Do you still end up with errors 500?