wie eine Abfrage zu aktualisieren props.data nach einer Abfrage onClick

Question

Ich verwende Apollo, um 2 Abfragen auszuführen,
die erste Abfrage wird automatisch von Apollo ausgeführt,
die zweite Abfrage wird ausgeführt, wenn auf eine Schaltfläche geklickt wird, und die Ergebnisse dieser Abfrage sollte einen Teil der ersten Abfrage aktualisieren (genau wie updateQueries tut für Mutationen).

Dies ist der Code, den ich versucht:

import React from 'react'; 
import {graphql, withApollo} from 'react-apollo'; 
import gql from 'graphql-tag'; 

class MaPage extends React.Component { 

    loadAllResults =()=> { 
     return this.props.client.query({ 
      query: query2, 
      variables: {userId: 'user_id_1'} 
      //I want to update the results of query1 by the results of query2 
     }); 
    } 

    render() { 
     if (this.props.data.loading) { 
      return (
       <div>Loading... </div> 
      ); 
     } 
     else { 
      return (
       <div> 
        {this.props.data.user.allResults.map((result)=> { 
         return (<span >{result.score} | </span>) 
        }) 
        } 
        <button onClick={this.loadAllResults}>load all results</button> 
       </div> 
      ); 
     } 
    } 
} 

const query1 = gql` 
    query GetInfos ($userId:ID!)){ 
     user(id:$userId){ 
      id 
      name 
      allResults(first:2){ 
       id 
       score 
      } 
      #get other attributes 
     } 
    } 
`; 
const query2 = gql` 
    query getAllResults ($userId:ID!){ 
     allResults(userId:$userId){ 
      id 
      score 
     } 
    } 
`; 

export default withApollo(
    graphql(query1, 
     { 
      options: (ownProps) => { 
       return { 
        variables: {userId: 'user_id_1'} 
       }; 
      } 
     } 
    ) 
    (MaPage)); 

Answer 1

Sie könnten ein hinzufügen reducer in query1 mit type==='APOLLO_QUERY_RESULT' und operationName==='getAllResults'

Beispiel:

graphql(query1, 
    { 
    options: (ownProps) => { 
    return { 
     variables: {userId: 'user_id_1'}, 
     reducer: (previousResult, action) => { 
       if (action.type === 'APOLLO_QUERY_RESULT' && action.operationName === 'getAllResults'){ 
        return update(previousResult, { 
         user: { ... } 
        }) 
       } 
       return previousResult; 
       } 
      }; 
     } 
    } 
) 

Mehr Infos bei http://dev.apollodata.com/react/cache-updates.html#resultReducers