Get Started

How it works#

Skeleton render & values#

GQty performs a invisible render (called the skeleton render) of all components, to identify the data they need. During this render, all scalars & enums are returned as undefined (aka. skeleton values). Once the response from the server arrives, these skeleton values are replaced with actual ones.

Interplay with Lists & Keys#

It's important to be aware of skeleton values, as using them as keys will result in a warning: => ( // During the skeleton render, the key is `undefined` <div key={}>{}</div> ));

React lists key warning

You can overcome this using either destructuring,{ id = 0, name }) => ( ^^^^^^ <div key={id}>{name}</div>

or the nullish coalescing operator: => ( <div key={ ?? 0}>{}</div> ^^^^^

How does it work?#

GQty performs a invisible render of all components, to identify the data they need. Once the data is fetched — scalars, nulls, and array sizes are filled in.

Will it affect bundle size?#

In the code-generated files, an object representation of the schema is outputted - negligible for most apps. This could be optimized in the future by stripping out unused parts.

The gqty packages are lightweight and don't require external dependencies.

How fast is it?#

Very fast, gqty's architecture was designed with performance in mind. Unlike other clients, queries are generated directly - instead of outputting intermediate AST.