Apollo-client: Documentation for typesafe named mutation queries is inadequate

[koblas]

Intended outcome:
I'm trying to port code from react-apollo 2.0 to 2.1, with named mutations. Expect to be able to write code that will compile.

https://www.apollographql.com/docs/react/recipes/static-typing.html

Actual outcome:
At the moment there are enough issues in the documentation that it's not possible to do this.

How to reproduce the issue:

1. Reading the example code fragments shows many errors that are not valid code (missing > and double >>)
2. The Request and Args values are interchanged to type definitions
3. No examples of mutations

Version

• [email protected]
• [email protected]
• [email protected]

Issue Labels

• [ ] has-reproduction
• [ ] feature
• [x] docs
• [ ] blocking
• [ ] good first issue

Example code

This is the code that I'm trying to port from 2.0 to 2.1 for reference.

const MUTATION = gql`
  mutation ($input: UserUpdateInput!) {
    user_update(input: $input) {
      validationErrors {
        field
        message
      }
      user {
        id
        email
        name
        avatarUrl
      }
    }
  }
`;

export interface Response {
  data: {
    user_update: {
      user?: UserQuery.UserType;
      validationErrors?: ValidationError[];
    };
  };
}

export interface Args {
  input: {
    email?: string;
    name?: string;
    newpass?: string;
    password?: string;
  }
}

export const mutation = graphql<Response, Args>(MUTATION, {
  props: ({ mutate }: any) => ({
    userUpdate: (input: Args) => mutate({ variables: { input } }),
  }),
});

[lstanden]

I just ran into the same issue, and I'm not convinced this is a documentation issue... the types seem to be wrong for the graphql method, resulting in compilation errors. Using [email protected]

Specifically I get this compilation error when attempting to try the example:
```
Argument of type '{ options: ({ episode }: InputProps) => { variables: { episode: string; }; }; props: ({ data }: O...' is not assignable to parameter of type 'OperationOption>'.
Types of property 'props' are incompatible.
Type '({ data }: OptionProps) => { error?: ApolloError; netwo...' is not assignable to type '(props: OptionProps, lastProps?: void | ChildDataProps<...'.
Type '{ error?: ApolloError; networkStatus: number; loading: boolean; variables: OperationVariables; fe...' is not assignable to type 'ChildDataProps'.
Type '{ error?: ApolloError; networkStatus: number; loading: boolean; variables: OperationVariables; fe...' is not assignable to type 'InputProps'.
Property 'episode' is missing in type '{ error?: ApolloError; networkStatus: number; loading: boolean; variables: OperationVariables; fe...'.

[hwillson]

@koblas - a few comments/questions:

Reading the example code fragments shows many errors that are not valid code (missing > and double >>)

Can you please provide direct links to the problematic content?

The Request and Args values are interchanged to type definitions

Same as above - please provide links.

No examples of mutations

As mentioned in the Typing the Component APIs section of the docs:

This approach is the exact same for the , , and components! Learn it once, and get the best types ever with Apollo.

@lstanden - exactly which example are you trying?

[lstanden]

I'm sorry, it was months ago I was looking at this, and don't have the specific example code I was using to refer to. I was literally working through the examples in the documentation above, so starting there would be a good place.

[hwillson]

Thanks @lstanden - the docs have changed quite a bit since then, so it's possible this issue has been fixed. I'll close this for now, but will happily re-open this issue if anyone runs into this and can provide more details. Thanks!

[reverie]

@hwillson Here are a few questions :)

If I use withApollo on a component, 'client' is a required property. How do I pass in client when I'm rendering that component from a parent?

Where is the documentation for the type parameters to graphql?

What are ChildProps and ChildDataProps? There are some unexplained examples, but I can't find any docs.

(Sorry if there's some section of the docs I'm missing.)