redux 동작에서 apollo 클라이언트 쿼리를 호출하는 방법

Question

내 응용 프로그램에서 redux 및 apollo 클라이언트를 사용하는 경우 구성 요소 외부의 동작에서 쿼리를 트리거하는 가장 좋은 방법은 무엇입니까?

예를 들어, redux 및 apollo 클라이언트가 구성된 표준 앱이있는 경우 어떻게 "새로 고침"목록을 트리거해야합니까? gql을 가지고있는 컴포넌트 자체에서 함수를 트리거 할 수는 있지만, 플럭스에 더 가까워지는 액션에서 어떻게 할 것인가?

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

그리고 사용자 데이터를 새로 고치기위한 작업을 실행하고 싶다고합시다. 로직이 컴포넌트 자체에 있기 때문에 액션 자체에서 어떻게 gql 쿼리를 트리거 할 지 확신 할 수 없습니다.

Answer 1

내 actions.js에서 ApolloClient를 사용해야합니다. 예 :

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

나는 며칠 전 너의 장소에 있었던 것처럼 너의 필요를 본다.

슬픈 소식은 : graphQL과 함께 작업을 사용하려는 경우 apollo을 사용하면 안되며 graphQL을 직접 사용하십시오. 이것은 당신을 걸을 아주 좋은 기사입니다 - getting started with Redux and GraphQL. 왜? Apollo는 qraphql(query)이라는 함수를 사용하기 때문에 자체 액션을 호출합니다.

Redux과 Apollo은 매우 단순한 방식으로 작동합니다.

• 가 돌아 오는 일 : ActionCreator (사용자가 작업 전달)을 -> 동작 -> 미들웨어 -> 감속기 -> 저장소 -> 사용자 소품에 바인딩 데이터를 포함한다. 그리고 우리는 각 상태를 수동으로 제어합니다.

• 아폴로 : (사용자가 쿼리/변이를 graphql(query)으로 전달) 모든 숨김 (동작 -> 저장)이 데이터를 사용자 소품에 바인딩합니다.

당신은 graphql를 사용하는 경우가 반응 graphQL와 더 나은 통합을 가지고 있기 때문에 아폴로, 돌아 오는을 대체 말할 수 있습니다.

그동안 Apollo가 개발 중이므로 redux-form에 대해서는 redux가 필요할 수 있습니다. 아폴로 외에도 redux를 계속 사용하려고 생각하는 일부 redux 라이브러리에 익숙하다면 상점을 바인딩하고 양쪽 모두에 적용되는 복장있는 미들웨어를 추가 할 수는 있지만 아마 Redo 액션을 사용하여 아폴로를 통해 데이터를 가져 오지는 않을 것입니다 .

필자는 희생자를 잃어 버리고있는 것처럼 느껴지지만 더 많은 비동기 요청과 캐싱으로 모든 이점을 얻고 있습니다.

그리고 시작할 장소가 필요한 경우 react-redux-apollo.