web-dev-qa-db-fra.com

Comment chaîner deux requêtes GraphQL en séquence à l'aide d'Apollo Client

J'utilise Apollo Client pour le frontend et Graphcool pour le backend. Il y a deux requêtes firstQuery et secondQuery que je veux qu'elles soient appelées en séquence lorsque la page s'ouvre. Voici l'exemple de code (la définition du composant TestPage n'est pas répertoriée ici):

export default compose(
        graphql(firstQuery, {
            name: 'firstQuery'
        }),
        graphql(secondQuery, { 
            name: 'secondQuery' ,
            options: (ownProps) => ({
                variables: {
                   var1: *getValueFromFirstQuery*
                }
            })
        })
)(withRouter(TestPage))

J'ai besoin d'avoir var1 dans secondQuery à partir du résultat de firstQuery. Comment puis-je faire cela avec Apollo Client et composer? Ou existe-t-il une autre façon de procéder? Merci d'avance.

graphqlapolloreact-apolloapollo-clientgraphcool
12
afterglowlee

Les accessoires ajoutés par votre composant firstQuery seront disponibles pour le composant en dessous (à l'intérieur), vous pouvez donc faire quelque chose comme:

export default compose(
        graphql(firstQuery, {
            name: 'firstQuery'
        }),
        graphql(secondQuery, { 
            name: 'secondQuery',
            skip: ({ firstQuery }) => !firstQuery.data,
            options: ({firstQuery}) => ({
                variables: {
                   var1: firstQuery.data.someQuery.someValue
                }
            })
        })
)(withRouter(TestPage))

Notez que nous utilisons skip pour ignorer la deuxième requête, sauf si nous avons réellement des données de la première requête avec lesquelles travailler.

34
Daniel Rearden

Pour tous ceux qui utilisent réagir aux hooks apollo la même approche fonctionne.

Vous pouvez utiliser deux crochets useQuery et passer le résultat de la première requête dans le skipoption de la seconde,

exemple de code:

const AlertToolbar = ({ alertUid }: AlertToolbarProps) => {
  const authenticationToken = useSelectAuthenticationToken()

  const { data: data1 } = useQuery<DataResponse>(query, {
    skip: !authenticationToken,
    variables: {
      alertUid,
    },
    context: makeContext(authenticationToken),
  })

  const { data: data2, error: error2 } = useQuery<DataResponse2>(query2, {
    skip:
      !authenticationToken ||
      !data1 ||
      !data1.alertOverview ||
      !data1.alertOverview.deviceId,
    variables: {
      deviceId:
        data1 && data1.alertOverview ? data1.alertOverview.deviceId : null,
    },
    context: makeContext(authenticationToken),
  })

  if (error2 || !data2 || !data2.deviceById || !data2.deviceById.id) {
    return null
  }
  const { deviceById: device } = data2
  return (
    <Toolbar>
    ...
    // do some stuff here with data12
3
Damian Green