2016-11-23 62 views
5

如果我在應用程序中使用REDX和APOLLO客戶端,從組件外的操作觸發查詢的最佳方式是什麼?如何從REDX操作調用阿波羅客戶端查詢

例如,如果我有一個標準的應用程序,配置了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查詢。

回答

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 
}); 
+0

你有沒有辦法做到這一點? –

+0

是的,你可以直接使用apollo客戶端,就像我在示例代碼中的答案。 – MonkeyBonkey

+0

並從其他組件? 'withApollo'? –

0

我明白你的需求,因爲我幾天前就在你的位置。

可悲的消息是:如果你想使用graphQL的動作,那麼你不應該使用apollo,直接使用graphQL即可。這是一篇很好的文章,可以幫助您完成 - getting started with Redux and GraphQL。爲什麼?因爲Apollo使用了一個名爲qraphql(query)的函數,它調用了它自己的操作。

ReduxApollo如何以非常簡單的方式工作。

  • 終極版:(用戶調度一個動作)ActionCreator - >操作 - >中間件 - >減速器 - >商店 - >將數據綁定到用戶的道具。我們手動控制每個狀態。 Apollo :(用戶將查詢/變異傳遞給graphql(query))所有隱藏的(動作 - >存儲)然後將數據綁定到用戶道具。

可以說,阿波羅取代終極版,如果你使用的是graphql,因爲它有反應,graphQL一個更好的整合。

與此同時,由於Apollo仍在開發中,您可能需要redux for redux-form等。如果你習慣了一些redux庫,你可能會考慮繼續使用除了Apollo之外的redux,你仍然可以綁定它們的商店並添加可能適用於這兩者的服裝中間件,但是你可能不會使用通過Apollo的Redux操作獲取數據。

我知道你覺得你失去了redux,但你有更多的異步請求和緩存照顧與阿波羅的優勢。

如果你需要一個地方開始react-redux-apollo