Pagination and filtering on nested properties

[matthewlawson]

Summary

I recently built an ecommerce style site with gatsby and I had a few issues with the build times as I was inadvertently over-fetching data. I have a simple Many to Many, Category <-> Product schema setup using foreign keys. I would like to be able to paginate on the nested properties the same way I can on the top level connection

For example when creating a product page it would be nice to render some related products by querying for other products in the same category.

Basic example

Existing query

I can currently do this with the following query. I commented where the overfetching happens.

{
  product(fields:{slug:{eq: $slug}}) {
    id
    category { # <- This can overfetch categories and can't be ordered if I am only interested in rendering two related categories (for example)
      name
      products { # <- This could potentially return hundreds of products
        name
      }
    }
  }
}

Proposed query

A Proposed solution is to bring the filtering / ordering / limit / skip functionality to these nested properties so a query like this could be written...

{
  product(fields:{slug:{eq: $slug}}) {
    id
    category(limit: 2) { 
      name
      products(limit: 12) { 
        name
      }
    }
  }
}

Motivation

• Less overfetching
• A nicer way to traverse the data than writing additional queries to filter based on the foreign key eg allProduct(limit:12, filter:{category:{name:{eq: $categoryName }}})

Apologies if this has been mentioned before or is currently being worked on - I couldn't find anything in the issues.

[sidharthachatterjee]

cc @freiksenet

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[matlc]

@sidharthachatterjee pinging you because I saw you act on this issue previously. I'd like to reopen this issue and continue the discussion, as this is something I've run to as well.

Being able to limit a nested field would be a great help.

This would be done by making any collection a Connection type?

Is there any best-practice or query convention that would make the OP's 'Proposed Query' not a good idea to pursue?

[cj2]

@CRYIC @matthewlawson Have you found any work arounds for this?

[me4502]

I've also just hit this issue. I looked into adding it, and appear to have somewhat found a way to do it for standard child nodes, however in my use case I am creating relationships to a list of nodes with a ___NODES field.

Being able to include these kinds of filters on these such fields would massively simplify my current GraphQL setup.

[me4502]

Seems this issue is related to (but not duplicating) #14060

The other refers to child nodes, whereas this refers to foreign keyed nodes.

[matlc]

I ended up changing my project a little, so I only ended up need child data a single layer deep.

Instead of requesting the nested relationship, I ended up breaking out the nested data into separate, aliased queries. I could then filter/limit those queries.

So originally, my query was something like:

{
  query ($id: String!) {
    topic(id: {eq: $id}) {
      id
      slug
      name
      blog_posts { //really only need the first 4
        slug
        title
      }
    }
  }
}

I pulled out the nested blog_posts to:

{
  query ($id: String!) {
    currentTopic: topic(id: {eq: $id}) {
      id
      slug
      name
    }

    relatedBlogPosts: blogPosts(
      filter: {
        topic: {id: {eq: $id}}
      },
      limit: 4
    ) {
      slug
      title
    }
  }
}

That said, it would be great to have a single, top-down query that's could help OP's more deeply nested data.

[matthewlawson]

@CRYIC @matthewlawson Have you found any work arounds for this?

I'm not actively developing anything with Gatsby currently so I'm not familiar with any new query features, but the best I could do at the time was basically what I mentioned in my original issue and what @CRYIC has done above. Adding an additional query and filtering on the foreign key there:

allProduct(limit:12, filter:{category:{name:{eq: $categoryName }}})

[me4502]

Doing it that way involves creating extra complexity and links in the data.

Also, it doesn't work very well when you're querying for multiple of the parent items and then filtering the inner item.

I've had a bit of a look into how to implement this, however, I don't completely understand the Gatsby GraphQL type creation process.

[zce]

Four months have passed. Are there any updates?

[laurenskling]

I've been trying this for some days now, but it seems just impossible. Gatsbys creation of the Connection resolvers seems so tried to the schema creation (https://github.com/gatsbyjs/gatsby/blob/gatsby%404.25.5/packages/gatsby/src/schema/types/pagination.ts#L68) that it seems impossible to me to add these kind of fields to a nested field.
I really want to use the group function in a custom resolver (in which I do some content filtering)