Westley Cho

Today's Progress

Here's what I worked on and learned today in my projects and studying.

auto-fill

auto-fill: fills the row with as many columns as it can fit

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
}

sorting in graphql

export const pageQuery = graphql`
  query pageQuery {
    allContentfulBlogPost(
      limit: 5
      filter: { node_locale: { eq: "en-US" } }
      sort: { fields: [date], order: DESC }
    ) {
      edges {
        node {
          createdAt
          title
          slug
        }
      }
    }
  }  
`

In the above exampe we're using gatsby and which uses graphql. Notice the three things in parentheses:

1. limit

limits the number of entries retrieved to 5

2. filter

filtered out all entries that were not "en-US"

3. sort

In this example I sorted based on date in descending order

Thoughts