J'ai besoin d'aide pour utiliser le nouveau composant Query and Mutation dans Apollo 2.1, en particulier avec plusieurs requêtes et mutations.
J'ai les problèmes suivants:
Vous êtes censé les imbriquer. Voir cet exemple à partir de docs :
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>
);
Pour aider à garder la nidification gérable, vous pouvez vérifier réagir-adopter . Ils ont un exemple Apollo ToDo App, où ils combinent une requête et plusieurs mutations.
À mon avis,
props
et faire cette demande.Pour utiliser plus d'une mutation et de plusieurs requêtes, vous pouvez utiliser compose
comme ceci
...
@compose(
graphql(GET_FEEDS_QUERY, {name : 'getFeeds'}),
graphql(CREATE_NEW_POST, {name: "createNewPost"}),
graphql(LIKE_POST_MUTATION, { name: "unlikePostMutation"}),
...
)
class HomeScreen extends Component {
...
}
Pour ce faire, react-apollo
exporte une fonction compose
. En utilisant cette fonction, vous pouvez utiliser proprement plusieurs exhausteurs de composants à la fois. Y compris plusieurs optimiseurs graphql (), ou même 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);
Une remarque importante est que compose()
exécute le dernier exhausteur en premier et revient dans la liste des améliorants.
Une dernière chose, disons que vous utilisiez this.props.data
, vous obtiendrez maintenant undefined
. console.log(this.props)
et vous verrez ce qui se passe maintenant avec les accessoires. Vous allez maintenant avoir deux propriétés getAuthors
et addTweet
. Alors maintenant, ce sera this.props.name-in-compose.name-of-type-in-typeDefs
i.e. this.props.getAuthors.getUsers
. Il m'a fallu un peu pour comprendre.
J'ai écrit un Medium Post sur la manière de combiner Mutation et Query sur le même composant . Voici un extrait du 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);