Gatsby: GraphQL sorting after schema customization.

Created on 14 Feb 2020  路  5Comments  路  Source: gatsbyjs/gatsby

Description

When running the following GraphQL query on a demo site of my gatsby-theme.

query MyQuery {
  allBlogPost(sort: {order: ASC, fields: date}) {
    nodes {
      title
    }
  }
  allMdxBlogPost(sort: {order: ASC, fields: date}) {
    nodes {
      title
    }
  }
  allMdx(sort: {order: ASC, fields: frontmatter___date}) {
    nodes {
      frontmatter {
        title
      }
    }
  }
}
  • allBlogPost and allMdxBlogPost are not sorted by date.
  • allMdx is sorted by date.

This also means order: ASC has no impact when changed to order: DESC for allBlogPost and allMdxBlogPost.

BlogPost is a GraphQL interface with @nodeInterface.
https://github.com/NickyMeuleman/gatsby-theme-nicky-blog/blob/master/theme/gatsby-node.js#L78

MdxBlogPost is a GraphQL interface that implements BlogPost
https://github.com/NickyMeuleman/gatsby-theme-nicky-blog/blob/9ead8f9536b4c477cadace0e73965d01680b6a88/theme/gatsby-node.js#L97

The date on MdxBlogPost is handled by a custom resolver.
https://github.com/NickyMeuleman/gatsby-theme-nicky-blog/blob/9ead8f9536b4c477cadace0e73965d01680b6a88/theme/gatsby-node.js#L148

I'm only querying for the allBlogPost in my site and would like to sort the results by date.

I'm working around this by adding the date to the MdxBlogPost nodes that get created.
https://github.com/NickyMeuleman/gatsby-theme-nicky-blog/blob/9ead8f9536b4c477cadace0e73965d01680b6a88/theme/gatsby-node.js#L320
(I'm using the same workaround for a couple of other fields to enable filtering/sorting in GraphQL)

I hoped this issue would disappear once https://github.com/gatsbyjs/gatsby/pull/17284 got merged. It was merged and the problem persists (using a Gatsby version that includes this PR.)

Steps to reproduce

Expected result

Sorts results from allBlogPost by date.

Actual result

Doesn't sort results from allBlogPost by date.

Environment

Running WSL2 on Windows 10.

Results from the root of the theme workspace

  System:
    OS: Linux 4.19 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-2500K CPU @ 3.30GHz
    Shell: 5.4.2 - /usr/bin/zsh
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
  Languages:
    Python: 2.7.15+ - /usr/bin/python
  npmPackages:
    gatsby-cypress: ^0.2.8 => 0.2.22
GraphQL

Most helpful comment

So basically this piece of Gatsby core is a culprit:

https://github.com/gatsbyjs/gatsby/blob/b1b89e0493bc5c7e31c89cfa863404db5bf35763/packages/gatsby/src/schema/schema.js#L839-L844

As you see needsResolve here is set to true only when the date field also has proxy extension. To confirm this, I've added an empty proxy: {} extension along with dateformat in your project on this line and sorting was fixed.

But I don't have an answer yet why do we need this at all and what side effects we can get from setting a proxy extension this way. I will get back to you when figuring this out.

@freiksenet Maybe you can clarify what is proxy and why it is required on fields with dateformat extension to make sorting/filtering work as expected?

All 5 comments

Thanks for the detailed issue description and repro. I am going to check it tomorrow. Do you have any updates on this or is it still an issue? Just want to make sure everything is still up-to-date?

Still having the same experience, no changes since posting this issue.

So basically this piece of Gatsby core is a culprit:

https://github.com/gatsbyjs/gatsby/blob/b1b89e0493bc5c7e31c89cfa863404db5bf35763/packages/gatsby/src/schema/schema.js#L839-L844

As you see needsResolve here is set to true only when the date field also has proxy extension. To confirm this, I've added an empty proxy: {} extension along with dateformat in your project on this line and sorting was fixed.

But I don't have an answer yet why do we need this at all and what side effects we can get from setting a proxy extension this way. I will get back to you when figuring this out.

@freiksenet Maybe you can clarify what is proxy and why it is required on fields with dateformat extension to make sorting/filtering work as expected?

Awesome, excellent find!
This allows me to delete a bunch of lines of code, YAY

This is a oversight - we don't know that something has a custom resolver or a built-in resolver in this case. We don't want to resolve dates because in that case the ordering might change because formatting will be applied to the date. Empty proxy is a valid hack for time being.

Please note that node interfaces are very experimental right now and not recommended at all for production - you are very welcome to try them out and I think a blog is a great place to experiment with them. However many things might change when we actually make them a recommended way to go with Gatsby. And if you want to use them - bugs and workarounds are expected.

I'll be closing this issue for now :) Feel free to open a new one if you have any more questions.

Was this page helpful?
0 / 5 - 0 ratings