graphql-zeus icon indicating copy to clipboard operation
graphql-zeus copied to clipboard

Installing Zeus with React Query: Missing `reactQuery.ts` and Type Safety

Open mrigankdoshy opened this issue 1 year ago • 2 comments

Hello :)

I'm running into two issues when trying to use Zeus with React Query and TypeScript in a React Native mobile app

Problem 1

When running zeus schema.graphql ./ --reactQuery (from the directory where the schema.graphql exists) , according to the documentation, it should generate a reactQuery.ts file from which we can import useTypedQuery. However, when I run that command, it does not seem to generate that file

image

I have "graphql-zeus": "^5.3.2", as a dependency in my package.json file

Am I missing something?

Problem 2

With the generated files (index.ts and const.ts), I'm unable to receive strong type safety.

For example, here's a simple schema (schema.graphql):

type Todo {
    id: ID!
    text: String!
    completed: Boolean!
}

type Query {
    todos: [Todo!]!
    todo(id: ID!): Todo
    getTodo(id: ID!): Todo
}

type Mutation {
    addTodo(text: String!): Todo
    updateTodo(id: ID!, text: String, completed: Boolean): Todo
    deleteTodo(id: ID!): Boolean
}

Using useQuery from react-query, this works well:

    const chain = Chain(
        'https://api.example.com',
        {
            headers: {
                'x-api-key': 'key-here',
            },
        }
    );

    const { data } = useQuery('todos-data', {
        queryFn: () =>
            chain('query')({
                todos: {
                    id: true,
                    text: true,
                    completed: true,
                },
            }),
    });

However, with the below, I don't get type safety (i.e. it does not complain that thisIsAnInvalidProp is not a valid parameter for the query)

image

Is there a way to enable strong type safety?


Note: This is a quick code sample and is not the actual schema I'm working with. Truly appreciate any help here, happy to answer any questions :)

mrigankdoshy avatar Nov 06 '23 18:11 mrigankdoshy

Same for me, I don't get reactQuery.ts generated either... @mrigankdoshy did you make it work?

hendrik244 avatar Jan 09 '24 10:01 hendrik244

Same for me, I don't get reactQuery.ts generated either... @hendrik244 did you make it work?

rhkdgns95 avatar Jul 26 '24 04:07 rhkdgns95