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

Latest commit

github-actions Version Packages (alpha) (#73)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Latest commit bbb30cc Mar 28, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.changeset Version Packages (alpha) (#73) Mar 28, 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 WIP gqlhub demo Mar 27, 2020
gqless Version Packages (alpha) (#59) Mar 22, 2020
internal feat: add algolia docsearch Mar 24, 2020
packages Version Packages (alpha) (#73) Mar 28, 2020
.browserslistrc Use faster methods Nov 8, 2019
.envrc.example Cache improvements (#22) Nov 7, 2019
.gitattributes Fixes Nov 2, 2019
.gitignore Static analysis (#39) Mar 13, 2020
.prettierrc Use LF Nov 2, 2019
README.md chore: add spectrum Mar 22, 2020
ROADMAP.md Update ROADMAP.md Nov 10, 2019
codecov.yml Fix input object nullability (#72) Mar 28, 2020
jest.config.base.js Static analysis (#39) Mar 13, 2020
lerna.json fix Nov 7, 2019
netlify.toml Add netlify.toml Aug 26, 2019
package.json chore: point to new domain Mar 22, 2020
tsconfig.json Cache improvements (#22) Nov 7, 2019
yarn.lock WIP gqlhub demo Mar 27, 2020

README.md

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.

Documentation

Edit react-hackernews

Features

  • 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)

packages/babel-plugin-gqless

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

Example

Your application:

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

const App = graphql(() => (
  <div>
    {query.users.map(user => (
      <User key={user.id} user={user} />
    ))}
  </div>
))

Resulting query:

query App {
  users {
    id
    name
    avatarUrl(size: 100)
  }
}

React

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(() => (
  <div>
    <h1>{query.me.name}</h1>
    <Query>
      <Description user={query.me} />
    </Query>
  </div>
))
query App { me { name } }
query Description { me { description } }

Extensions

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: user.name, message })
  },

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

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

Typescript

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 ...
query.userss

Cache

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
query.me.age += 1

// Use pattern-matching to find an existing node
query.me.following.push({ username: 'bob' })

// Or you can pass the node
query.me.following.push(query.users[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: user.id, age })
  },
})

Credits

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

Contributors

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]

Individuals

Organizations

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.