web-dev-qa-db-ja.com

Apollo 2.1での複数クエリ/突然変異

Apollo 2.1の新しいQuery and Mutationコンポーネント、特に複数のクエリとミューテーションを使用するには、いくつかのヘルプが必要です。

次の問題があります。

  1. 以前のgraphqlの結果に依存するgraphqlリクエストがありますが、これに対処するにはどうすればよいですか？
  2. クエリを既に持っているコンポーネントに2つの異なる突然変異を追加するには（コンポーネントで2つの異なるアクションを実行する必要があります）？
graphqlapolloreact-apollo
15
brunodahora

Apolloから2019/08/24を編集 docs ：

Apolloクライアント用の新しいフックAPIは、Reactアプリ内でデータを取得する簡単な方法です。レンダリングプロップコンポーネントと高次コンポーネント（HOC）の定型文なし。今後のアポロコード。

元の答え：あなたはそれらをネストすることになっています。この例を参照してください。

const NumbersWithData = () => (
  <Query query={QueryOne}>
    {({ loading: loadingOne, data: { one } }) => (
      <Query query={QueryTwo}>
        {({ loading: loadingTwo, data: { two }}) => {
          if (loadingOne || loadingTwo) return <span>loading...</span>
          return <h3>{one} is less than {two}</h3>
        }}
      </Query>
    )}
  </Query>
);

ネストを管理しやすくするために、 react-adopt を確認できます。 Apollo ToDo Appの例があり、クエリと複数の突然変異を組み合わせています。

24
devboell

この目的で_react-apollo_はcompose関数をエクスポートします。この機能を使用すると、複数のコンポーネントエンハンサーを一度にきれいに使用できます。複数のgraphql（）またはRedux connect（）エンハンサーを含む。

_import { Mutation, compose, graphql } from "react-apollo";

class AddTweet extends Component {
....
....
....
}
export default compose(
  graphql(GET_AUTHORS, { name: "getAuthors" }),
  graphql(ADD_Tweet, { name: "addTweet" }),
  connect(...), // incase you are using Redux
)(AddTweet);
_

重要な注意点は、compose()は最後のエンハンサーを最初に実行し、エンハンサーのリストを逆方向に処理することです。

もう1つ、_this.props.data_を使用していたと言えば、get undefinedが得られます。ただconsole.log(this.props)とすると、小道具に何が起こっているのかがわかります。 getAuthorsとaddTweetの2つのプロパティが作成されます。したがって、現在は_this.props.name-in-compose.name-of-type-in-typeDefs_になります。つまり、_this.props.getAuthors.getUsers_です。それを理解するのに少し時間がかかりました。

10
Sajjad

私の考えでは、

  1. リクエストを行うには、前のリクエストに依存します。そのリクエストを子コンポーネントに分割し、propsなどの前のリクエストの結果を渡して、そのリクエストを実行できます。

  2. 複数の突然変異とクエリを使用するには、次のようにcomposeを使用できます

    ...
@compose(
 graphql(GET_FEEDS_QUERY, {name : 'getFeeds'}),
 graphql(CREATE_NEW_POST, {name: "createNewPost"}),
 graphql(LIKE_POST_MUTATION, { name: "unlikePostMutation"}),
 ...
)
class HomeScreen extends Component {
 ...
}
4
tuan.tran

react-apolloからcomposeを使用することに加えて、チェックアウトできるもう1つの優れたユーティリティライブラリは react-adopt です。ネストされた地獄パターンがないようにmultiplerender propsタイプのコンポーネントを作成するのに役立つ素晴らしい小さなユーティリティライブラリ。

私は 類似の答え を書きました。これは基本的にあなたの現在のニーズをすべてカバーしています：

  • React-adoptを介してマッパーfnから以前の結果を使用する方法
  • React-adoptを使用して、Composedコンポーネントからの複数のクエリ/突然変異を組み合わせる

詳細な回答 あなたが探しているとあなたの問題を解決するのに役立つことを願っています:)

1
JayKan

同じコンポーネントで突然変異とクエリを組み合わせる方法について Medium Post を書きました。これが投稿の抜粋です

// other import
import {Query} from “Apollo-graphql”; // new Query Component
import gql from "graphql-tag";
import { graphql } from "react-apollo";
import UserComponent from '../component/UserComponent'; // any component to display query result
const GET_ALL_USER = gql`
    {
        allUsers: {
            firstname,
            lastname,
            username,
            # other information
        }
    }
`
const UPDATE_USER_STATUS = gql`
    mutation UpdateUserStatus($userID: ID!, $status: Int!){
        updateUserState(userID: $userID, status: $status){
            firstname,
            lastname
            username
            # other information
        }
    }
`
ExampleComponent extends React.Component{
    onEditInformation = async (user) => {
        const response  = await mutate({
            variables: {userID: user}
        })
    }
render(){
        return(
            <Query query={GET_ALL_USER}>
                {({data: { allUsers }}) => {
                    return allusers.map(user => {
                        return (
                            <UserComponent
                                user={user}
                                onEdit={() => this.onEditInformation(user)}
                            />
                        )
                    })
                }}
            </Query>
        )
    }
}
export default graphql(UPDATE_USER_STATUS)(ExampleComponent);
1
Emmanuel