Interfaces & unions

Components are seamlessly rendered multiple times, letting you use conditional flow - as if the values were already fetched.

Usage

Using abstract types is as simple as comparing with ofType():

import { ofType } from '@gqless/react'
const Component = graphql(() => {
if (ofType(query.user, 'Employee')) {
return <div>{query.user.employeeId}</div>
}
if (ofType(query.user, 'Student')) {
return <div>{query.user.studentClass}</div>
}
return null
})

Why shouldn't I use __typename?

Unnecessary performance penalties, if there's a lot of possible types or the component is expensive to render.

In order to determine the correct selections, components are rendered multiple times before they suspend.

Calling ofType signals the exact types you want, preventing unnecessary renders:

graphql(({ abstract }) => {
console.log(abstract.__typename) // => null, A
if (ofType(abstract, 'A')) {
return <div>{abstract.a}</div>
}
return null
})

Comparing __typename doesn't signal anything, so the component will render for all possible types:

graphql(({ abstract }) => {
console.log(abstract.__typename) // => null, A, B, C ...
if (abstract.__typename === 'A') {
return <div>{abstract.a}</div>
}
return null
})
Last updated on by Sam Denty