Jak wywołać zapytanie klienta apollo z akcji redux

Question

Jeśli używam aplikacji redux i klienta apollo w mojej aplikacji, jaki jest najlepszy sposób wyzwolenia zapytania z działania poza komponentem.

Na przykład, jeśli mam standardową aplikację, z konfiguracją klienta redux i apollo, w jaki sposób powinienem wyzwolić listę "odświeżania". Mogę wywołać funkcję na samym komponencie, który ma gql, ale jak zrobiłbym to z działania, które byłoby bardziej zgodne z topnikiem.

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

Powiedzmy, że chcę wywołać akcję, aby odświeżyć dane użytkownika? Ponieważ logika znajduje się w samym komponencie, nie jestem pewien, w jaki sposób wyzwoliłbym kwerendę gql z samej akcji.

Answer 1

Potrzebowałbym użyć ApolloClient w moim actions.js. na przykład

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

Widzę twoje potrzeby, ponieważ byłam u ciebie kilka dni temu.

Smutne wieści: jeśli chcesz użyć akcji z graphQL, nie powinieneś używać apollo, po prostu użyj graphQL bezpośrednio. To jest bardzo dobry artykuł, aby przejść przez ciebie - getting started with Redux and GraphQL. Czemu? Ponieważ Apollo używa funkcji o nazwie qraphql(query), która wywołuje własną akcję.

Jak zarówno Redux jak i Apollo działają w bardzo uproszczony sposób.

• Redux: (Użytkownik wywołuje działania) ActionCreator -> Akcja -> Middleware -> reduktor -> sklep -> Dane wiążą się rekwizytami użytkowników. I kontrolujemy każdy stan ręcznie.

• Apollo: (Użytkownik przechodzi kwerendę/mutację do graphql(query)) wszystkie ukryte (akcja -> sklep) następnie wiąże dane z rekwizytami użytkownika.

Można powiedzieć, że Apollo zastępuje Redux jeśli używasz graphql, ponieważ ma lepszą integrację z zareagować i graphQL.

W międzyczasie, ponieważ Apollo wciąż się rozwija, możesz potrzebować redux dla formy redux i tak dalej. Jeśli jesteś przyzwyczajony do niektórych bibliotek redux, które możesz nadal używać zamiast Apollo, możesz nadal wiązać swoje sklepy i dodawać kostiumowe oprogramowanie pośrednie, które prawdopodobnie dotyczy obu, ale prawdopodobnie nie będziesz pobierał danych za pomocą akcji Redux przez Apollo .

Wiem, że czujesz się tak, jakbyś tracił redux, ale zyskujesz wszystkie zalety dzięki większej liczbie żądań asynchronicznych i buforowaniu dbaniu o Apollo.

i jeśli potrzebujesz miejsca, aby rozpocząć react-redux-apollo.