fix(docs): Add loading prop usage on Connect component and mutation code snippet

[elorzafe]

To be merged after publishing change on Connect component
aws-amplify/amplify-js#1868

[undefobj]

Can we do something a little more comprehensive that also includes error checking like so:

<Connect query={graphqlOperation(ListEvents)}>
  {({ data: { listEvents }, loading, error }) => (
    if (error) return <h1>Error fetching results</h1>
    if (loading || !data) return <h1>Loading...</h1>
      return <ListView events={listEvents.items} />
  )}
</Connect>

[elorzafe]

For sure, I will try this and update the docs. Thanks!

[undefobj]

Here is the functioning snippet in JSX:

<Connect query={graphqlOperation(ListTodos)}>
        {({ data: { listTodos }, loading, error }) => {
          if (error) return <h1>Error</h1>;
          if (loading || !listTodos) return <h1>Loading...</h1>;
            return <ListView todos={listTodos.items} />
        }}
        </Connect>

[undefobj]

Similar to the above, let's be more prescriptive on the error handling and also call out the function argument from the GraphQL response. Here is a suggestion for the code and text:

        <Connect query={graphqlOperation(ListTodos)}
          subscription={graphqlOperation(OnCreateTodo)}
          onSubscriptionMsg={(prev, {onCreateTodo}) => {
              console.log('Subscription data:', onCreateTodo)
              return prev;
            }
          }>
        {({ data: { listTodos }, loading, error }) => {
          if (error) return <h1>Error</h1>;
          if (loading || !listTodos) return <h1>Loading...</h1>;
            return <ListView todos={listTodos.items} />
        }}
        </Connect>

Note - In the above example OnCreateTodo passed to the subscription prop as subscription={graphqlOperation(OnCreateTodo)} is the name of your GraphQL document. For example when used with the Amplify CLI it will generate a document and you would use import { OnCreateTodo } from './graphql/subscriptions'; at the top of your app code. However the argument onCreateTodo received by the onSubscriptionMsg is defined in the GraphQL selection set. For example your GraphQL statement would look like the following here:

export const OnCreateTodo = `
  subscription OnCreateTodo {
    onCreateTodo {
      id
      name
      description
    }
  }
`;

[undefobj]

Maybe since this is an example we can simplify it a bit so that new customers to React don't get lost on the extra state management here for handling input. Also, we should show the input type since that's what we're doing with our coegen. Suggested simplification which builds upon the last example:

class AddTodo extends Component {
  constructor(props) {
    super(props);
    console.log(props);
  }

  submit = async () => {
    const { onCreate } = this.props;
    var input = {
      name: 'TEST',
      description: 'TEST'
    }
    console.log(input);
    await onCreate({input})
  }

  render(){
    return (
      <button onClick={this.submit}>Click</button>
    );
  }
}

class App extends Component {
  render() {

    const ListView = ({ todos }) => (
      <div>
          <h3>All Todos</h3>
          <ul>
            {todos.map(todo => <li key={todo.id}>{todo.name}</li>)}
          </ul>
      </div>
    )

    return (
      <div className="App">
        <Connect mutation={graphqlOperation(CreateTodo)}>
          {({mutation}) => (
            <AddTodo onCreate={mutation} />
          )}
        </Connect>

        <Connect query={graphqlOperation(ListTodos)}
          subscription={graphqlOperation(OnCreateTodo)}
          onSubscriptionMsg={(prev, {onCreateTodo}) => {
              console.log('Subscription data:', onCreateTodo)
              return prev;
            }
          }>
        {({ data: { listTodos }, loading, error }) => {
          if (error) return <h1>Error</h1>;
          if (loading || !listTodos) return <h1>Loading...</h1>;
            return <ListView todos={listTodos.items} />
        }}
        </Connect>
      </div>

    );
  }
}

[undefobj]

@elorzafe here are the suggested changes from our chat earlier with working code. One last thought is you might want to use my code for a Todo rather than Event type, since the beginning of the API guide already shows how to use the GraphQL Transformer with this type definition so we can keep it consistent.

[elorzafe]

I agree, it would be much nice if the whole instructions flow from the Todo type. I will prepare the next iteration based on the Todo, It will be required to change all the graphql queries.

[elorzafe]

Closing this because we will use #16