GraphQL - Query by Content Relationship using a variable

Developing with Prismic
1

Hello !
I am trying to filter results by content relationship field. I am following the documentation here : Query Data with GraphQL - Prismic

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 !

2

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!

3

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

image
image2854×1680 343 KB

Let me know if you need more info.
Thanks !

4

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.

6

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 !

7

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

9

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:

10

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 ?

11

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?