Watch mode & refactorings

[samdenty]

Intro

GQless was created based upon the pain of having to manually update GraphQL queries, and then furthermore update your application.

Tooling such as graphql-inspector can assist with updating queries, but it still leaves the burden on you to update application-code.

GQless provides a standard type-safe model of accessing data from a schema within your application. With this type-safe guarantee, it allows us to fully utilize the TypeScript API to perform complex refactorings.

Example

Let's say you've just renamed a field in your API:

type User {
  login -> username
}

and you have the following code:

function App() {
  return <div>{query.me.login}</div>
}

With the knowledge of this diff, we can perform a rename of the login field in the schema:

const schema = {
    User: {
        login: "String!"
//      ^^^^^
// Perform a rename of this token (AKA what you'd do if you pressed F2 in the editor)
    },
}

TypeScript will scan the project for all references, and then update the app to:

function App() {
  return <div>{query.me.username}</div>
//                      ^^^^^^^^
//                 The new field name
}

Workflow

Development

This would be an amazing tool baked into watch-mode. During development you often rename fields / types multiple times.

CI

This would also be amazing as a CI plugin.

In one-click, your could merge a PR that updates your entire codebase to a new version of a GraphQL API.

If there are unresolvable conflicts, the PR could list the exact lines in your app where they arise and automatically tag the code owners in the description.