Apollo 2.1の新しいQuery and Mutationコンポーネント、特に複数のクエリとミューテーションを使用するには、いくつかのヘルプが必要です。
次の問題があります。
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の例があり、クエリと複数の突然変異を組み合わせています。
この目的で_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
_です。それを理解するのに少し時間がかかりました。
私の考えでは、
props
などの前のリクエストの結果を渡して、そのリクエストを実行できます。複数の突然変異とクエリを使用するには、次のようにcompose
を使用できます
...
@compose(
graphql(GET_FEEDS_QUERY, {name : 'getFeeds'}),
graphql(CREATE_NEW_POST, {name: "createNewPost"}),
graphql(LIKE_POST_MUTATION, { name: "unlikePostMutation"}),
...
)
class HomeScreen extends Component {
...
}
react-apollo
からcompose
を使用することに加えて、チェックアウトできるもう1つの優れたユーティリティライブラリは react-adopt です。ネストされた地獄パターンがないようにmultiplerender props
タイプのコンポーネントを作成するのに役立つ素晴らしい小さなユーティリティライブラリ。
私は 類似の答え を書きました。これは基本的にあなたの現在のニーズをすべてカバーしています:
詳細な回答 あなたが探しているとあなたの問題を解決するのに役立つことを願っています:)
同じコンポーネントで突然変異とクエリを組み合わせる方法について 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);