Typescript and GraphQL mismatch types between graphql response and typescript type

Question

I am using typescript, react-apollo and AWS Appsync for a react app I am building, but running into typescript warnings which I'm not sure where I am going wrong.

I have a graphql schema that looks like -

schema {
    query: Query
}

type Query {
    events: [Event]
}

type Event {
   ...
}

I am using useQuery to return all events, like -

const {
   loading: eventsListLoading,
   error: eventsListError,
   data: eventsListData
} = useQuery(EVENTS_LIST_HOME);

EVENTS_LIST_HOME comes from -

export const EVENTS_LIST_HOME = gql`
    query eventsListHome{
        events {
            title
        }
    }
`;

and I am trying to render the items like -

<table>
   {
      eventsListData.events.map((event: IEvent) => (
         <tr>
             <td>{event.title}</td>
         </tr>
      ))
   }
</table>

where I have a typescript interface IEvent

export default interface IEvent {
    title: string;
}

but I am getting the error -

I have tried renaming the typescript type to Event instead of IEvent and adding the other args, index and array, even though they are not used, but same error

What am I missing? How do I use the grapghql type of Event in typescript?

How do you generate your typescript types? TypeScript has structural typing, meaning that types shapes need to be compatible - names don't matter. The easiest thing might be to simply omit the annotation. The type seems to be inferred. — Herku
– Herku, Commented Apr 26, 2020 at 19:31
@Herku I currently don't generate them. I was doing them manually. Should I be generating them? Unfortunately I wasn't getting any intellisense for event in my IDE when i omit the type in the map callback — andy mccullough
– andy mccullough, Commented Apr 26, 2020 at 22:06

manjunatha_d · Accepted Answer · 2020-07-02 13:28:01Z

2

You should use apollo codegen to generate TypeScript types for the types declared in your graphql schema - https://github.com/apollographql/apollo-tooling#apollo-clientcodegen-output.

It looks like there is a type mismatch between Event and IEvent. Can't say much without seeing the definition of Event.

Using the types generated by apollo codegen should fix the type errors.

answered Jul 2, 2020 at 13:28

manjunatha_d

3193 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

andy mccullough Over a year ago

i ended up using graphql-codegen (npmjs.com/package/@graphql-codegen/cli) in the end, thanks!

manjunatha_d Over a year ago

I'd recommend using apollo cli because it's the official one and works well with react-apollo.

Collectives™ on Stack Overflow

Typescript and GraphQL mismatch types between graphql response and typescript type

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related