gqless - 根据您的应用程序使用的数据自动生成GraphQL查询

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

Features

No need to write queries - auto-generated at runtime100% GraphQL spec supported - unions, interfaces, scalars, field arguments, input, enums...TypeScript safe - without running code-generation on each changeInbuilt cache - can be used without apollo-clientExtensions - 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 1Scalars 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 libraryManual 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 }) => (

{user.name}

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 you can seperate components into different queries.

const Description = graphql(({ user }) =>

{user.description}

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 objectsexport 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 valuesquery.me.age += 1// Use pattern-matching to find an existing nodequery.me.following.push({ username: 'bob' })// Or you can pass the nodequery.me.following.push(query.users[0])

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

// src/extensions/indexexport 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

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]

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。