Extract Object types

[carlocorradini]

I discovered that ResultOf can be used to retrieve Input(s), Scalar(s), and Enum(s) values.
Is it also possible to extract the various Object types?
The type can be quite helpful 🥳

PS: Thank you for this awesome library!

[kitten]

There is a dedicated helper to extract input, scalar, and enum types, as per: https://gql-tada.0no.co/reference/gql-tada-api#graphql-scalar

As per other discussions and issues, you by definition can't extract object types.
Object types don't have a fixed type, since their type is dependent on a selection. Instead, you'd always create a specific fragment of what data a piece of code depends on and then compose these fragments upwards — details here: https://gql-tada.0no.co/guides/fragment-colocation

[yossefbenhaim]

Hi, I tried to use ResultOf to get the type from a query, but all fields are nullable. How can I remove the nullability?

[kitten]

Please search for prior discussions answers related to your question or create separate discussion threads next time ❤️ This isn't related to this discussion and hence unnecessarily pings the original poster, and makes responses here less relevant.

However, there are some threads that already answer this if you search for "nullability" in our prior discussions and questions:

• Ability to customize the "null type" #228
• Why can everything be null? #161

To put it short, you can't just "remove nullability". Your schema says that this field is nullable and hence the type must reflect that. You can change the type in TypeScript but that won't solve that this field is nullable.

If you read up about GraphQL nullability you'll find that this is by design. Nullability allows for:

• better forward/backward-compatibility, since you can remove nullable fields and replace their results with null any time
• stops errors from bubbling up further, potentially allowing other fields to still be resolved and delivered
• semantic differences to be expressed, e.g. auth errors, or having a separate "signal" to the result instead of just an empty list

Change your schema if you don't want that, or simply handle fields that can be null properly. For lists however, you could safely at least consider [T!] to say items within the list can't be null.

Lastly, type X = ResultOf<typeof Doc> makes me think you're trying to do something odd and that you might want to look up our docs on fragment co-location. Just to point this out, in case you want granular types rather than full query types ✌️

[kyrylofranko]

@kitten what if I need to pass a query's field which is an object as a prop to some component - how do I define a type of the object for it with gql.tada, not only just the ResultOf the whole TadaDocumentNode? I believe it's a very common situation when you pass objects as props. I assumed it might be something like pokemons: ResultOf<typeof POKEMONS>['currentUser']['pokemons']['nodes'] but it doesn't work

[kitten]

Feel free to create a new thread with the question if you'd like to provide a larger code example or expand a bit, but I'm sorry, I'm not sure I fully understand the question or the problem you're getting at in this context.

Just taking a guess here, if you mean you have a component defining a fragment for, say, { scalarA, scalarB }, and you're only passing on scalarA, you'll have to decide whether the child component actually has a data dependency, in which case a fragment makes sense, or is just a presentational component.
In the latter case, you'd likely consume a scalar type or a self-defined refular TS type.

For example, a common example would be a <UserAvatar /> component with maybe a user prop. This might then define a fragment for the avatar image fields on the user type.
But a generic <Image /> component rendered by this avatar component would probably just accept a src/srcSet prop which doesn't involve a fragment and isn't specific to your schema.

I'm not sure if that's what you're getting at though

[kyrylofranko]

thanks for the quick answer 🙌🏻 my question is not about scalars or fragments, just basic props of objects of a GQL query field

a specific example (how to define pokemons type in Child?):

const POKEMONS = graphql(`
    query UserPokemons {
        currentUser {
            pokemones {
                nodes {
                    id
                    name
                }
            }
        } 
    }
`);

const Child = ({ pokemons }: { pokemons: ? what is the type here ? }) => {
    return (
        <div>
            {pokemons.map((pokemon) => (
                <div key={pokemon.id}>{pokemon.name}</div>
            ))}
        </div>
    );
};

const Parent () => {
    const { data } = useQuery(POKEMONS);
    const pokemons = data?.currentUser?.pokemons?.nodes;

    return (
        <Child pokemons={pokemons} />
    );
}

[kitten]

That's answered in the original comment: #233 (comment)

It's mentioned several times in some discussions, I believe, but to reiterate it,

• https://gql-tada.0no.co/get-started/writing-graphql#fragments
• https://gql-tada.0no.co/guides/fragment-colocation
  Please read these docs. They basically go over these concepts in detail. Fragment co-location means that each component that consumes (GraphQL) data specifies its data requirements, via fragments.

In your example Child consumes a Pokemon type, so it should define a fragment on Pokemon at specify its selection set, then its fragment should be composed into the query that renders it. This works recursively with each nesting — if Child has another ChildChild, then that in turn should also define a fragment that's then composed into Child's fragment.

Your types i.e. prop type specifically, are then based on the fragment, and readFragment is used, in case of fragment masking (unless you disable that), to unwrap the fragment type.

Edit: btw, if you have some more back-and-forth type questions, we also have a Discord, which is more convenient for async messaging, in case you have more follow-up questions ✌️

[kyrylofranko]

@kitten how can I join Discord? I think I got the point about using more Fragments for the fields that are objects in a query, so where we want we can define a type like pokemon?: FragmentOf<typeof pokemonFragment>, but I face an issue, when I hover on the variable pokemon I see types, but either TS autocomplete or destructuring assignment const { TS doesn't see fields of pokemon here } = pokemon || {} doesn't work (I use @_unmask for my fragment).