Passing variables to nested queries

I am trying to figure out how to invoke the following query. I am having issues figuring out how to pass in the variable to the inner resolver.

const CATALOG_QUERY = gql`

   query Catalog($style: String!, $color: String, $size: String, $pageSize: Int!, $pageNumber: Int!, $stateProvince: String!) {
        catalog(style: $style, color: $color, size: $size, pageSize: $pageSize, pageNumber: $pageNumber) {
        
            content {
                sku
                style
                color
                size
                
                inventory(stateProvince: $stateProvince) {
                    onHand
                    
                }
                
            }
            currentPage
            totalPages
            totalElements
        }
    }

`;

Then trying to run it with the following hook

const { loading, error, data } = useQuery(CATALOG_QUERY, {
        variables: {
            style: 'AH8050',
            color: '005',
            size: '11.5',
            pageSize: 5,
            pageNumber: 1,
            stateProvince: 'IN'
        }
    });

Hello! Could you clarify which resolver you’re having issues with, and which variable(s)? Your resolver for the inventory field should be able to obtain the stateProvince argument from its args parameter:

inventory(parent, { stateProvince }) {
  // Do something with stateProvince
}

If you’d like the resolvers of subfields (such as onHand) to have access to a variable’s value as well, one convenient way is to put that value on the context:

inventory(parent, { stateProvince }, context) {
  context.stateProvince = stateProvince;
}

The onHand resolver can then obtain that value from the context object:

onHand(parent, args, { stateProvince }) {
  // Resolver logic
}

So the graphql server is written in java using spring. Using the graphiql console i can invoke this query just fine:

{
  	catalog(style:"AH8050") {
    
    content {
      inventory(stateProvince: "IN") {
        location {
          locationNumber
          description
          phoneNumber
          banner
        }
      }
    }
  }
   
}

How can i translate that into the useQuery hook and pass in variables.

This does not work:

  const CATALOG_QUERY = gql`

   query Catalog($style: String!, $stateProvince: String!) {
        catalog(style: $style) {
        
            content {
                
                inventory(stateProvince: $stateProvince) {
                    location {
                        locationNumber
                        description
                        phoneNumber
                        banner
                    }
                }
                
            }
        }
    }
`;

const { loading, error, data } = useQuery(CATALOG_QUERY, {
        variables: {
            style: 'AH8050',
            stateProvince: 'IN'
        }
    });

Interesting :thinking: , could you provide the full body of the error you’re seeing, and where you’re seeing that error (client-side vs. server-side)?