React Caveats

All scalars can be undefined?#

For gqless to be able to work, in the first pass of your data usage, every GraphQL Scalar and Enum is returned as undefined, after that, the data requirement is acknowledged by gqless, and when the data arrives from the GraphQL API, it returns the new value instead.

We will often call them Skeleton value.

One important thing to note is that the "Skeleton value" is different than null (which was used in the early designs), which allows you differentiate between when it's a "Skeleton value" or an actual null coming from the API, and it also allows you to easily set default values to replace only the "Skeleton value" while destructuring.

const {
  user: { id = 1 },
} = useQuery();

Using lists in React#

The fact that we use undefined as "Skeleton value" implies a little inconvenience while rendering lists in React.

When using a GraphQL scalar as key, React doesn't accept undefined as a key value, and warns about it in the first render of your components

React lists key warning

To fix this issue, you have two alternatives:

If you are destructuring, you can use = in your target key:

<>
  {query.users.map(({ name, id = 0 }) => {
    return <p key={id}>{name}</p>;
  })}
</>

Or if you are passing the whole object to be used by another component, you can do:

<>
  {query.users.map((user) => {
    return <User key={user.id || 0} user={user} />;
  })}
</>

In both cases we recommend defaulting to a key you can be sure won't appear in your data, or if you are not sure about it, you can use the second method, and default to a different type of value.