GraphQLConf 2024

One of the most boring, laborious, and error-prone processes in GraphQL adoption is manually writing a fragment with all the fields that a given component will use. It requires engineers to track the fetched data through child components, conditionals, and function calls. We humans aren't good at being consistent and thorough — but computers are! That's why we decided to write a tool to generate appropriate fragments based on field usages! With this tool, developers add a JavaScript comment telling the program to track a given variable, run the algorithm, and voilà! They receive a fragment that selects just the fields used by that function. It even works across files, functions and classes — you can run the tool once for an entire component tree. The resulting fragments will contain fragment spreads that track the data from function to function, drastically reducing the time it takes to implement GraphQL in the frontend. In this presentation, I will show the tool, explain the use case and the road map, and then demonstrate this tool by generating fragments for an entire component tree. GraphQL adoption has never been easier!