Skip to content
A GraphQL client without queries
TypeScript JavaScript Other
Branch: master
Clone or download

Latest commit

lukejagodzinski Treat EnumNode the same way as ScalarNode (#88)
* Fix #84 do not add __typename to enums

* Add changeset

* Fix #84 treat EnumNode the same way as ScalarNode
Latest commit a8f8128 Apr 6, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.changeset Version Packages (alpha) (#86) Apr 5, 2020
.codesandbox Fix input object nullability (#72) Mar 28, 2020
.github Cache improvements (#22) Nov 7, 2019
.vscode Use faster methods Nov 8, 2019
SPEC Static analysis (#39) Mar 13, 2020
docs Add CLI/Codegen section to docs (#60) Mar 22, 2020
examples Enum support (#87) Apr 5, 2020
gqless Treat EnumNode the same way as ScalarNode (#88) Apr 6, 2020
internal feat: add algolia docsearch Mar 24, 2020
packages Version Packages (alpha) (#86) Apr 5, 2020
.browserslistrc Use faster methods Nov 8, 2019
.envrc.example Cache improvements (#22) Nov 7, 2019
.gitattributes Fixes Nov 2, 2019
.gitignore Enum support (#87) Apr 5, 2020
.prettierrc Use LF Nov 2, 2019 chore: add spectrum Mar 22, 2020 Update Nov 10, 2019
codecov.yml Fix input object nullability (#72) Mar 28, 2020
jest.config.base.js test scanImports Apr 4, 2020
lerna.json fix Nov 7, 2019
netlify.toml Add netlify.toml Aug 26, 2019
package.json test scanImports Apr 4, 2020
tsconfig.json Cache improvements (#22) Nov 7, 2019
yarn.lock test scanImports Apr 4, 2020

gqless Financial Contributors on Open Collective Join the community on Spectrum

in-beta, click here to see progress

NOTE: Mutations, Subscriptions are next to be added

Auto-generates GraphQL queries based on the data your application consumes.


Edit react-hackernews


  • No need to write queries - auto-generated at runtime
  • 100% GraphQL spec supported - unions, interfaces, scalars, field arguments, input, enums...
  • TypeScript safe - without running code-generation on each change
  • Inbuilt cache - can be used without apollo-client
  • Extensions - add custom properties and functions to types (similiar to apollo-link-state)
  • React integration - uses suspense out the box, selectively updating components when data changes

How it works

React - JIT using proxies (STABLE)

By wrapping a component in graphql(), gqless will perform an additional render of your entire application. All the GraphQL objects will be available, but the data on them won't.

  • Arrays will have a length of 1
  • Scalars will return null

Once this phase has completed, a GraphQL query will be generated. The component will suspend using React Suspense.

After the query has been fetched, your application will re-render with the newly available data.

GQLess compiler (WIP)


This is a long-term project. It's job is to analyze your application's code, and extract the GraphQL data that you're using.

It can currently analyze imports, function calls, array iteration etc.

Eventually this will replace the JIT, but there's still more work to do.

Static analysis of dynamic JS is a tough challenge. Relay solves this by introducing custom syntax - which makes it harder to use.

gqless's compiler is going to use a combination of different methods to make your app statically analyzable (without new syntax):

  • Utilize the Typescript Compiler API - track Generics, auto-infer dynamic usage
  • @types/.d.ts alternative - allows people to define how to statically analzye a third-party library
  • Manual tagging - allows end-developers to manually define in-code how the static analysis works, using simple declaratives


Your application:

const User = graphql(({ user }: { user: User }) => (
    <img src={user.avatarUrl({ size: 100 })} />

const App = graphql(() => (
    { => (
      <User key={} user={user} />

Resulting query:

query App {
  users {
    avatarUrl(size: 100)


Individual queries

By default, all component data requirements are merged into one query. By using <Query> you can seperate components into different queries.

const Description = graphql(({ user }) => <p>{user.description}</p>)

const App = graphql(() => (
      <Description user={} />
query App { me { name } }
query Description { me { description } }


Extensions allow you to expressively add custom properties to types, whilst being type-safe.

// src/graphql/extensions/index.ts

// Convert date strings into Date objects
export const Date = (date_string: string) => new Date(date_string)

export const User = user => ({
  // Add a new property
  sendMessage(message: string) {
    console.log({ name:, message })

  // Add a function to unf
  following: {
    [INDEX]: {
      unfollow() {},

query.user.sendMessage('test') // => { name: 'bob', message: 'test' }
query.user.createdAt // => Date object


Run the CLI each time your API changes, and get full type-safety & IDE support.

// Error: Type 'string' is not assignable to type 'number'
//            ~~~~~~~~~~~~
query.users({ limit: 'asd' })

// Property 'userss' does not exist on type ...


Apollo encourages you to manually update the cache, which leads to loads of boilerplate.

gqless's cache is inspired by mobx. By using normal JS methods/assignments, the cache is auto-magically updated.

// Use setters to change type values += 1

// Use pattern-matching to find an existing node{ username: 'bob' })

// Or you can pass the node[0])

Combined with Extensions, you can automatically dispatch mutations when the cache is updated

// src/extensions/index
export const User = user => ({
  set age(age: number) {
    mutation.updateAge({ id:, age })


  • Inspired by babel-blade, but with the idea of being entirely runtime-based


Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]



Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

You can’t perform that action at this time.