GraphQL using nested query arguments on parent or parent arguments on nested query

Question

I have a product and items

Product:

{
  id: Int
  style_id: Int
  items: [items]
}

Items:

{
  id: Int
  product_id: Int
  size: String
}

I want to query products but only get back products that have an item with a size.

So a query could look like this:

products(size: ["S","M"]) {
  id
  style_id
  items(size: ["S","M"]) {
    id
    size
  }
}

But it seems like there should be a way where I can just do

products {
  id
  style_id
  items(size: ["S","M"]) {
    id
    size
  }
}

And in the resolver for the products I can grab arguments from the nested query and use them. In this case add the check to only return products that have those sizes. This way I have the top level returned with pagination correct instead of a lot of empty products.

Is this possible or atleast doing it the other way around:

products(size: ["S","M"]) {
  id
  style_id
  items {
    id
    size
  }
}

And sending the size argument down to the items resolver? Only way I know would be through context but the one place I found this they said that it is not a great idea because context spans the full query in all depths.

GraphQL doesn’t natively support what you’re asking for; if you want to filter which top-level items you get back it needs to be controlled by parameters on that top-level query field and not something lower. — David Maze
– David Maze, Commented Dec 7, 2018 at 14:40

Croolsby · Accepted Answer · 2018-12-07 21:35:18Z

9

I agree with @DenisCappelini's answer. If possible, you can create a new type which represents only Products that have an Item.

However, if you don't want to do that, or if you're just interested in general about how a top-level selector can know about arguments on child selectors, here is a way to do that:

There are 2 ways to do it.

To do this:

products {
  id
  style_id
  items(size: ["S","M"]) {
    id
    size
  }
}

In graphql, resolvers have this signature:

(obj, args, context, info) => {}

The 4th argument, info, contains information about the entire request. Namely, it knows about arguments on the child selectors.

Use this package, or a similar one because there are others, to parse info for you: https://www.npmjs.com/package/graphql-parse-resolve-info

The above is quite a lot of work, so if you want to do this instead:

products(size: ["S","M"]) {
  id
  style_id
  items {
    id
    size
  }
}

Then in your resolver for products, you need to also return size. Suppose this is your resolver for products:

(parent, args) => {
  ...
  return {
    id: '',
    style_id: ''
  }
}

Modify your resolver to also return size like this:

(parent, args) => {
  ...
  return {
    id: '',
    style_id: '',
    size: ["S", "M"]
  }
}

Now in your resolve for products.items, you will have access to the size, like this:

(product, args) => {
  const size = product.size
}

answered Dec 7, 2018 at 21:35

Croolsby

1,4761 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BrinkDaDrink Over a year ago

didn't realize you could return fields not setup in your return object and get them on the child. That makes perfect sense and the way I am going to go about it.

deniscapp Over a year ago

The info solution is cool! IMO the second one is a little bit weird, but yeah it should work as well!

Tun Cham Roeun · Accepted Answer · 2020-09-24 15:30:07Z

2

I found this useful #reference

//the typedef:

type Post {
    _id: String
    title: String
    private: Boolean
    author(username: String): Author
}
//the resolver:
Post: {
        author(post, {username}){
        //response
      },
    }
// usage
{
    posts(private: true){
    _id,
    title,
    author(username: "theara"){
      _id,
      username
    }
  }
}

answered Sep 24, 2020 at 15:30

Tun Cham Roeun

1645 bronze badges

Comments

deniscapp · Accepted Answer · 2018-12-07 17:39:50Z

1

IMO you should have a ProductFilterInputType which is represented by a GraphQLList(GraphQLString), and this resolver filters the products based on this list.

import { GraphQLList, GraphQLString } from 'graphql';

const ProductFilterInputType = new GraphQLInputObjectType({
  name: 'ProductFilter',
  fields: () => ({
    size: {
      type: GraphQLList(GraphQLString),
      description: 'list of sizes',
    }
  }),
});

Hope it helps :)

edited Dec 7, 2018 at 17:39

answered Dec 7, 2018 at 17:15

deniscapp

8201 gold badge11 silver badges24 bronze badges

Comments

DragonKnight · Accepted Answer · 2022-12-06 07:33:43Z

these are few tweaks you can add and make your design better and also filter items properly.

1- change your product schema:

{
  id: Int! # i would rather to use uuid which its type is String in gql.
  styleId: Int
  items: [items!] # list can be optional but if is not, better have item. but better design is below: 
  items(after: String, before: String, first: Int, last: Int, filter: ItemsFilterInput, orderBy: [ItemsOrderInput]): ItemsConnection
}

2- have a enum type for sizes:

enum Size {
    SMALL
    MEDIUM
}

3- change item schema

{
  id: Int!
  size: Size
  productId: Int
  product: Product # you need to resolve this if you want to get product from item.productId
}

4- have a filter type

input ItemFilterInput {
    and: [ItemFilterInput!]
    or: [ItemFilterInput!]
    id: Int # you can use same for parent id like productId 
    idIn: [Int!]
    idNot: Int
    idNotIn: [Int!]
    size: Size 
    sizeIn: [Size!]
    sizeNotIn: [Size!]
    sizeGt: Size # since sizes are not in alphabetic order and not sortable this wont be meaningful, but i keep it here to be used for other attributes. or you can also trick to add a number before size enums line 1SMALL, 2MEDIUM.
    sizeGte: Size
    sizeLt: Size
    sizeLte: Size 
    sizeBetween: [Size!, Size!]
}

5- then create your resolvers to resolve the below query:

{
   product {
       items(filter: {sizeIn:[SMALL, MEDIUM]}) {
           id 
       }
   }
}
# if returning `ItemsConnection` resolve it this way: 
{
    product {
        id 
        items {
            edges {
                node { # node will be an item.
                    id 
                    size
                }
            }
        }
    }
}

Relay has a very good guideline to design a better schema. https://relay.dev/ I also recommend you to add edges and node and connection to your resolvers to be able to add cursors as well. having product {items:[item]} will limit your flexibility.

Collectives™ on Stack Overflow

GraphQL using nested query arguments on parent or parent arguments on nested query

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related