15

2018 更新: Apollo Client 2.1 は、loading プロパティを元に戻す新しい Mutation コンポーネントを追加しました。以下の @robin-wieruch の回答とこちらの発表を参照してください https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926 Apollo の以前のバージョンにのみ適用される元の質問を読み進めてください。

(v0.5.2)の現在のバージョンのhigh graphql-order-component を使用するとreact-apollo、ミューテーションがサーバーの応答を待っていることを UI に通知する方法が文書化されていません。以前のバージョンのパッケージでは、読み込みを示すプロパティが送信されていたことがわかります。

ここに記載されているように、クエリはまだ読み込みプロパティを受け取ります: http://dev.apollodata.com/react/queries.html#default-result-props

私のアプリケーションも redux を使用しているため、コンポーネントを redux に接続し、UI を読み込み状態にする関数プロパティを渡すことが 1 つの方法だと思います。次に、graphql ミューテーションをプロパティに書き換えるときに、redux ストアを更新するための呼び出しを行うことができます。

おおよそこのようなもの：

function Form({ handleSubmit, loading, handleChange, value }) {
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="something"
        value={value}
        onChange={handleChange}
        disabled={loading}
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Loading...' : 'Submit'}
      </button>
    </form>
  );
}

const withSubmit = graphql(
  gql`
    mutation submit($something : String) {
      submit(something : $something) {
        id
        something
      }
    }
  `, 
  {
    props: ({ ownProps, mutate }) => ({
      async handleSubmit() {
        ownProps.setLoading(true);
        try {
          const result = await mutate();
        } catch (err) {
          // @todo handle error here
        }
        ownProps.setLoading(false);
      },
    }),
  }
);

const withLoading = connect(
  (state) => ({ loading: state.loading }),
  (dispatch) => ({
    setLoading(loading) {
      dispatch(loadingAction(loading));
    },
  })
);

export default withLoading(withSubmit(Form));

ミューテーションが「実行中」であることを UI に通知するための、より慣用的なアプローチがあるかどうか、興味があります。ありがとう。

4

2 に答える 2

5

この質問に出くわした人は誰でも、Apollo Client 2.1以降、Query and Mutationコンポーネントの render props functionでこれらのプロパティにアクセスできます。

import React from "react";
import { Mutation } from "react-apollo";
import gql from "graphql-tag";

const TOGGLE_TODO = gql`
  mutation ToggleTodo($id: Int!) {
    toggleTodo(id: $id) {
      id
      completed
    }
  }
`;

const Todo = ({ id, text }) => (
  <Mutation mutation={TOGGLE_TODO} variables={{ id }}>
    {(toggleTodo, { loading, error, data }) => (
      <div>
        <p onClick={toggleTodo}>
          {text}
        </p>
        {loading && <p>Loading...</p>}
        {error && <p>Error :( Please try again</p>}
      </div>
    )}
  </Mutation>
);

注: Apollo Client 2.1 リリースのブログ投稿から抜粋したサンプル コード。

于 2018-04-22T06:12:10.917 に答える