Graphql-code-generator: [Feature] Required baseOptions/variables in generated hooks of typescript-react-apollo when a query or mutation is created with required parameters

[anderha]

Hey,

I am using graphql-code-generator for typescript and react with version 2.0.7 of graphql-codegen/typescript-react-apollo and apollo/client version 3.2.2.

As in the discussion "How to configure baseOptions as required?" stated I would really appreciate if baseOptions and variables could be marked as required by the code generator when I create a query or mutation with required parameters. See the example below or in the discussion for clarification. I would really like to see this feature for queries and mutations.

My types:

type Query {
    todo(id: Long!): Todo!
}

type Todo {
    id: Long
    description: String
    done: Boolean
}

My query:

query Todo($id: Long!) {
    todo(id: $id) {
        description,
        done
    }
}

Generated function:

export function useTodoQuery(baseOptions?: Apollo.QueryHookOptions<TodoQuery, TodoVariables>) {
    return Apollo.useQuery<TodoQuery, TodoVariables>(TodoDocument, baseOptions);
}

Call the hook:

// query with required parameter:
const { loading, error, data } = useTodoQuery({ variables: {id: 1}})

// query without required parameter:
const { loading, error, data } = useTodoQuery() // no error, because baseOptions are optional -> but I do want an error if i have to hand parameters over

[dotansimha]

Thank you for reporting this @anderha .
I added support for this in this PR: https://github.com/dotansimha/graphql-code-generator/pull/5037

Can you please try it? the alpha version is @graphql-codegen/[email protected].

[dotansimha]

Available in @graphql-codegen/[email protected]

[gynekolog]

Is there an option to disable this feature?

Example:

const [login] = useLoginMutation();

const handleSubmit = useCallback(async () => {
    try {
      const token = await getToken();
      await login({
        variables: { input: { authToken: token.accessToken } }
      });
    } catch (error) {
      console.log(error);
    }
  }, [login]);

const [login] = useLoginMutation() throw TS error now.
It can be solved by const [login] = useLoginMutation({}) but I don't want make this "fix" across the whole project.
Is solution of this issue at @graphql-codegen/[email protected] correct when error can be resolved by empty object?

[dotansimha]

@gynekolog thank you for reporting this. We are tracking the improvement of this feature here: https://github.com/dotansimha/graphql-code-generator/issues/5045

[anderha]

With the fixed mutation parameters in #5045 it works like charm. Thanks a lot for this improvement @dotansimha