web-dev-qa-db-fra.com

Plusieurs requêtes/mutations dans Apollo 2.1

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:

  1. J'ai une requête graphql qui dépend d'un résultat précédent, comment puis-je gérer cela?
  2. Comment ajouter deux mutations différentes (dans mon composant, je dois effectuer deux actions différentes) dans un composant contenant déjà une requête?
graphqlapolloreact-apollo
5
brunodahora

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.

13
devboell

À mon avis,

  1. Pour faire une demande dépend de la demande précédente, vous pouvez casser cette demande au composant enfants et lui transmettre le résultat de la demande précédente comme props et faire cette demande.

  2. 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 {
 ...
}
4
Tuấn Trần Duy

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.

3
Sajjad

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);
1
Emmanuel