Need help for two issues

Hey bro,

I do love this package. It’s amazing and can help me a lot. But I have two issues when using this package with typescript.

First issue: I have some queries like

mutation logout {
	logout @client {
		success
	}
}

Error:

GraphQL Error: Unknown directive "client".

Looks like the generator does not like “@client” syntax. But another generator can generate the code correctly.

Second issue:

	export function HOC<TProps = {}>(
		operationOptions?: ReactApollo.OperationOption<TProps, Query, Variables>
	) {
		return ReactApollo.graphql<TProps, Query, Variables>(
			Document,
			operationOptions
		);
	}

The HOC is generated correctly but with a type error for operationOptions. It’s happening on all queries.

The type error is:

Argument of type 'OperationOption<TProps, Query, Variables, ChildProps<TProps, Query, Variables>> | undefined' is not assignable to parameter of type 'OperationOption<TProps, Query, Variables, Partial<DataProps<Query, Variables>> & Partial<MutateProps<Query, Variables>>> | undefined'.
  Type 'OperationOption<TProps, Query, Variables, ChildProps<TProps, Query, Variables>>' is not assignable to type 'OperationOption<TProps, Query, Variables, Partial<DataProps<Query, Variables>> & Partial<MutateProps<Query, Variables>>>'.
    Types of property 'props' are incompatible.
      Type '((props: OptionProps<TProps, Query, Variables>, lastProps?: void | ChildProps<TProps, Query, Variables> | undefined) => ChildProps<TProps, Query, Variables>) | undefined' is not assignable to type '((props: OptionProps<TProps, Query, Variables>, lastProps?: void | (Partial<DataProps<Query, Variables>> & Partial<MutateProps<Query, Variables>>) | undefined) => Partial<...> & Partial<...>) | undefined'.
        Type '(props: OptionProps<TProps, Query, Variables>, lastProps?: void | ChildProps<TProps, Query, Variables> | undefined) => ChildProps<TProps, Query, Variables>' is not assignable to type '(props: OptionProps<TProps, Query, Variables>, lastProps?: void | (Partial<DataProps<Query, Variables>> & Partial<MutateProps<Query, Variables>>) | undefined) => Partial<...> & Partial<...>'.
          Types of parameters 'lastProps' and 'lastProps' are incompatible.
            Type 'void | (Partial<DataProps<Query, Variables>> & Partial<MutateProps<Query, Variables>>) | undefined' is not assignable to type 'void | ChildProps<TProps, Query, Variables> | undefined'.
              Type 'Partial<DataProps<Query, Variables>> & Partial<MutateProps<Query, Variables>>' is not assignable to type 'void | ChildProps<TProps, Query, Variables> | undefined'.
                Type 'Partial<DataProps<Query, Variables>> & Partial<MutateProps<Query, Variables>>' is not assignable to type 'ChildProps<TProps, Query, Variables>'.
                  Type 'Partial<DataProps<Query, Variables>> & Partial<MutateProps<Query, Variables>>' is not assignable to type 'TProps'.

Please fell free to point out what I did wrong or what I can do to fix them. I really want to use it 😃

Thanks again for everyone’s effort to build this handy package 👍

[Xample]

For the @client support, you can add this following line to any .graphql file containing your schema: directive @client(always: Boolean) on FIELD This will let the compiler know you can use a directive @client and that this directive can take a boolean always.

[valerybugakov]

@ardatan you’re right, the latest version of the react-apollo-template fixes the issue for me, thanks!