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:

query.users.map((user) => (
  // During the skeleton render, the key is `undefined`
  <div key={user.id}>{user.name}</div>
));

React lists key warning

You can overcome this using either destructuring,

query.users.map(({ id = 0, name }) => (
                   ^^^^^^
  <div key={id}>{name}</div>

or the nullish coalescing operator:

query.users.map((user) => (
  <div key={user.id ?? 0}>{user.name}</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.