Search code examples
javascriptreactjsgraphqlcontent-management-systemgatsby

Attempting to sort graphQL order by position with DatoCMS adn Gatsby JS


I am using this Gatsby JS plugin to explore the DatoCMS GraphQL API https://github.com/datocms/gatsby-source-datocms In the dato docs it says you can order by position in the cms https://www.datocms.com/docs/content-delivery-api/ordering/

I basically want to preserve the order in the cms, not have it order based on date.

In the dato API Explorer I can order posts by position like so.

query MyQuery {
  allProjects(orderBy: position_ASC) {
    slug
  }
}

However in Gatsby the same query alludes me I have tried something like this below but it gives me this error Expected type SortOrderEnum, found position_ASC

query MyQuery {
  allDatoCmsProject(sort: {order: position_ASC}) {
    edges {
      node {
        slug
      }
    }
  }
}

In the gatsby plugin the syntax is slightly different the DatoCMS graphQL explorer This is how the plugin expects me to do my ordering if I wanted to order it by a particular field. However I can't find any field that would allow me to order by position of the elements in Dato cms

{
  allDatoCmsBlogPost(sort: { fields: [publicationDate], order: DESC }, limit: 5) {
    edges {
      node {
        title
        excerpt
        publicationDate(formatString: "MM-DD-YYYY")
        author {
          name
          avatar {
            url
          }
        }
      }
    }
  }
}

Solution

  • When your Model has "visualisation mode" of table, a property called position get's added.

    Records collection visualization mode "Tabular view"

    We can use this position to sort the records like this:

    allDatoCmsProject(sort: { fields: [position], order: ASC }){
    ...
    }