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も非常に単純な方法で動作します。

• Reduxの：ActionCreator（ユーザーがアクションディスパッチ） - ユーザーの小道具に>バインドデータ - >アクション - >ミドルウェア - >減速機 - >店を。また、各状態を手動で制御します。

• Apollo :(ユーザーはクエリ/突然変異をgraphql(query)に渡します）すべて非表示（アクション - >ストア）し、データをユーザーの小道具にバインドします。

あなたはgraphqlを使用している場合、それは反応しgraphQLとの統合を持っているので、アポロは、Reduxのを置き換えることを言うことができます。

それまでのところ、Apolloがまだ開発中であるため、redux-formなどのためにはreduxが必要な場合があります。あなたがいくつかのreduxライブラリに慣れていれば、引き続きApexを使うことができるかもしれませんが、おそらく両ストアにバインドして、両方に当てはまる服装ミドルウェアを追加することができます。しかし、おそらくApollo 。

私はそれがあなたの犠牲者を失っているように感じていますが、より多くの非同期リクエストとキャッシュでアポロの世話をすることですべての利点を得ています。

と始める場所が必要な場合react-redux-apollo。