Collapse your generated GraphQL files in GitHub diffs

Git diffs help us to visually parse code changes. GitHub does a really good job of this, and is one of many reasons why we all love it so much. There are, however, some code changes that needlessly take up visual real estate, and are not too helpful to look at. A file type that you may have noticed that gets automatically collapsed are yarn.lock files. There are a bunch of different files that GitHub hides by default. You can find the code used to determine if a file should be collapsed by default in a repository that GitHub has open sourced: github.com/github/linguist.

This library is used on GitHub.com to detect blob languages, ignore binary or vendored files, suppress generated files in diffs, and generate language breakdown graphs.

I recently joined Lattice as a full-stack engineer where we have been using Facebook’s GraphQL Relay compiler to generate a lot of GraphQL queries and Flow typing for our front-end application’s react components. These files were huge (sometimes over 1k lines) and nothing about them were ever worth reviewing. Here’s the top of a 300 line example generated file:

I recently got a pull request approved that collapses these Relay compiler generated GraphQL files. An now in GitHub these files are collapsed:

If you ever need one off generated files to be collapsed by default, you can add them to the .gitattributes in the root of your project’s directory. GitHub will match all files that match the rule name linguist-generated and hide them. At Lattice we automatically generate the schema.graphql file in our admin application that doesn’t fit any of the rules that GitHub has by default. So to collapse that file we added this rule to our .gitattributes file:

*.graphql linguist-generated

You can obviously collapse any files you want in your GitHub diffs, not just GraphQL related ones.