So rufen Sie eine Apollo-Client-Abfrage von einer Redux-Aktion auf

Question

Wenn ich redux und den Apollo-Client in meiner App verwende, ist dies der beste Weg, eine Abfrage von einer Aktion außerhalb einer Komponente auszulösen.

Zum Beispiel, wenn ich eine Standard-App habe, mit Redux und Apollo Client konfiguriert, wie sollte ich eine "Refresh" -Liste auslösen. Ich kann eine Funktion auf der Komponente selbst auslösen, die die gql hat, aber wie würde ich es aus einer Aktion machen, die mehr im Fluss wäre.

import React, { Component, PropTypes } from 'react'; 
import { graphql } from 'react-apollo'; 
import gql from 'graphql-tag'; 
import { connect } from 'react-redux'; 
import { refreshProfile } from './actions'; 

class Profile extends Component { ... } 
Profile.propTypes = { 
    data: PropTypes.shape({ 
    loading: PropTypes.bool.isRequired, 
    user: PropTypes.object, 
    }).isRequired, 
}; 

const UserQuery = gql` 
    query getUser { 
    user { 
     id 
     name 
    } 
    } 
`; 

const ProfileWithData = graphql(UserQuery)(Profile); 
const ProfileWithDataAndState = connect(
(state) => ({ user: state.user })), 
)(ProfileWithData); 

Und sagen, ich möchte eine Aktion auslösen, um diese Benutzerdaten zu aktualisieren? Da die Logik in der Komponente selbst ist, bin ich mir nicht sicher, wie ich diese gql-Abfrage von der Aktion selbst auslösen würde.

Answer 1

Ich müsste den ApolloClient in meinem actions.js verwenden. z.B.

import ApolloClient, { createNetworkInterface } from 'apollo-client'; 
const networkInterface = createNetworkInterface({ 
    uri: config.graphCoolUri, 
}); 

const client = new ApolloClient({ 
    networkInterface, 
    dataIdFromObject: r => r.id, 
}); 

const { data } = await client.query({ 
    query: UserQuery 
}); 

Answer 2

Ich sehe Ihre Bedürfnisse, wie ich vor ein paar Tagen an Ihrer Stelle war.

Die traurige Nachricht ist: Wenn Sie mit graphQL Aktionen verwenden möchten, dann sollten Sie nicht apollo sein verwenden, nur graphQL direkt verwenden. Dies ist ein sehr guter Artikel, um Sie durch zu gehen - getting started with Redux and GraphQL. Warum? Weil Apollo eine Funktion namens qraphql(query) verwendet, die eine eigene Aktion aufruft.

Wie beide Redux und Apollo arbeiten sehr simpel.

• Redux: (Benutzer entsendet eine Aktion) ActionCreator -> Aktion -> Middleware -> Minderer -> Speicher -> binden Daten an Benutzer Requisiten. Und wir steuern jeden Staat manuell.

• Apollo: (Benutzer übergibt die Abfrage/Mutation an graphql(query)) alle versteckten (Aktion -> speichern) bindet dann Daten an Benutzer Requisiten.

können Sie sagen, dass Apollo Redux ersetzt, wenn Sie graphql verwenden, weil es eine bessere Integration mit reagieren und graphQL hat.

In der Zwischenzeit, als Apollo noch in der Entwicklung ist, benötigen Sie Redux für Redux-Form und so weiter. Wenn Sie an einige Redux-Bibliotheken gewöhnt sind, die Sie neben Apollo weiterhin redux verwenden möchten, können Sie ihre Stores binden und eine kostenpflichtige Middleware hinzufügen, die wahrscheinlich für beide gilt, aber Sie werden Daten wahrscheinlich nicht mit Redux-Aktionen über Apollo abrufen .

Ich weiß, es fühlt sich an, als ob du Redux verlierst, aber du erhältst alle Vorteile mit mehr asynchronen Anfragen und Caching, die sich um Apollo kümmern.

und wenn Sie einen Ort zum Starten benötigen react-redux-apollo.