Passing variables to nested queries

Help
,
1

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'
        }
    });
2

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
}
3

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'
        }
    });
4

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)?

5

I had this exact same issue and I found a workaround.

What you want to do is wrap your graph query in a function and pass your nested variable as a parameter. You can also do this for the primary variables.

export const functionName = (limit, skip, stateProvince) => {
  const CATALOG_QUERY = gql`
    query Catalog($style: String!) {
      catalog: catalog(style: $style, limit: ${limit}, skip: ${skip}) {
        inventory: inventory(sort: ${stateProvince}) {
          onhand
        }
      }
    }
 
  `
  return CATALOG_QUERY
}

Now in Apollo you can call this function like so:

import { functionName} from './'

const { loading, error, data } = useQuery(functionName(10, 0, 'IN') {
        variables: {
            style: 'AH8050',
        }
    });

Make sure you make a distinction between variables you pass as parameters and the ones you include in the variables object. The ones you put into the function parameters don’t need to be declared as types in the graph query.

1 Like
6

Thanks for the answer. This works fine for me, but I understand that is not good practice build dynamic queries. Probably would be better update correctly the apollo-server to take the arguments from the parent resolver, I guess