19

It's easy to pass a parameter to a GraphQL query. But what about GraphQL fragments?

This code contains some perfectly normal querying with a parameter (itemId) and a hint at what I attempt to do (includeExtraResults) :

export const GET_ITEM = gql`
  query GetItem($itemId: ID!, $includeExtraResults:BOOLEAN) {
    container {
      item(itemId: $itemId) {
        itemId
        someField
        innerItem(someExtraOption: $includeExtraResults) {
          ...InnerItemFragment
        }
      }
    }
  }
  ${INNER_ITEM_FRAGMENT}
`;

export const INNER_ITEM_FRAGMENT = gql`
  fragment InnerItemFragment on InnerItemType {
    innerItemId
    innerInnerItem(someExtraOption: $includeExtraResults) {
      someFields
    }
  }
  ${INNER_INNER_ITEM_FRAGMENT}
`;


export const INNER_INNER_ITEM_FRAGMENT = gql`
  /* (not detailed here) */
`;

When inner-inner items get automatically queried as part of inner items, I don't want them to return the field based upon which the filter works. The client doesn't know the logic either. Instead I want to use the parameter, and the logic is decided on server side.

Still, their query is implemented in a way that it wants the (optional) parameter "includeExtraResults", which is passed to GetItem in the first place.

So, is there a way to pass "includeExtraResults" to the inner fragment? What should be changed for this to make sense? In real life this is a complex system with many levels of inner fragments.

2 Answers 2

22

It's not the same, but still related:

You can use query's variables inside Fragments:

query HeroComparison($first: Int = 3) {
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  friendsConnection(first: $first) {
    totalCount
    edges {
      node {
        name
      }
    }
  }
}

This info from the official guide

1
  • This was actually was I was trying to achieve, so I've changed "correct answer" to your answer (after almost 3 years of the other answer having the green tick ;-p). I don't remember why I was encountering issues and what led me to believe I couldn't use the global query parameter in the fragment. Maybe I was using some auto-generated Typescript wrappers and/or some syntax checking tool (Lint) which were throwing red flags about this. Or maybe I just wasn't bold enough to assume it would work. Dec 10, 2021 at 13:28
11

As outlined here, you have to explicitly enable fragment variables before using them:

import { enableExperimentalFragmentVariables } from 'graphql-tag'

enableExperimentalFragmentVariables()

That should at least let you use variables defined in your operation inside included fragments. Please note that this still is an experimental feature that's not officially part of the spec -- see this issue for the ongoing conversation.

4
  • 1
    Could you maybe add an example to demonstrate the syntax right here in stackoverflow? Mar 29, 2019 at 15:42
  • 1
    @jeancallisti The above should work with the code in your question. Other than enabling the feature, there's no changes needed. What is unclear about the syntax? Mar 29, 2019 at 16:01
  • OK then, if it works "as is" and if includeExtraResults can be passed to innerInnerItem, then I'm good. I wonder how the compiler will react if I include that fragment in another query that doesn't have the parameter, but that's for another day. Apr 2, 2019 at 9:50
  • I think graphql-tag will still parse that, but you'll definitely hit a server error since your query won't pass validation. Apr 2, 2019 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.