graphql-editor / graphql-zeus

GraphQL client and GraphQL code generator with GraphQL autocomplete library generation ⚡⚡⚡ for browser,nodejs and react native ( apollo compatible )
https://graphqleditor.com/docs/tools/zeus/index/
MIT License
1.93k stars 104 forks source link

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

Open mrigankdoshy opened 10 months ago

mrigankdoshy commented 10 months ago

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 :)

hendrik244 commented 8 months ago

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

rhkdgns95 commented 1 month ago

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