你如何動態地控制反應apollo-客戶端查詢啓動？

用apollo-client查詢包裝的反應組件會自動啓動對服務器的數據調用。你如何動態地控制反應apollo-客戶端查詢啓動？

我想僅針對特定的用戶輸入發出數據請求。

You can pass the skip option in the query options - 但這意味着refetch（）函數不作爲組件的支撐提供;並且看起來跳過的值不是在prop更新時動態評估的。

我的使用情況是一個地圖組件。我只想要在用戶按下按鈕時加載標記的數據，而不是初始組件安裝或位置更改。

一個代碼示例如下：

// GraphQL wrapping 
Explore = graphql(RoutesWithinQuery, { 
    options: ({ displayedMapRegion }) => ({ 
    variables: { 
     scope: 'WITHIN', 
     targetRegion: mapRegionToGeoRegionInputType(displayedMapRegion) 
    }, 
    skip: ({ targetResource, searchIsAllowedForMapArea }) => { 
     const skip = Boolean(!searchIsAllowedForMapArea || targetResource != 'ROUTE'); 
     return skip; 
    }, 
    }), 
    props: ({ ownProps, data: { loading, viewer, refetch }}) => ({ 
    routes: viewer && viewer.routes ? viewer.routes : [], 
    refetch, 
    loading 
    }) 
})(Explore);

來源

2016-10-28 Nick McIntosh

跳過的報告仍然不適用於此用例。現在你必須要和阿波羅手工取回自己。 – Pencilcheck

要包括基於受一個道具的狀態的HOC改變，你可以使用branch從recompose。

branch(
    test: (props: Object) => boolean, 
    left: HigherOrderComponent, 
    right: ?HigherOrderComponent 
): HigherOrderComponent

檢查：https://github.com/acdlite/recompose/blob/master/docs/API.md#branch

對於這個具體的例子，看起來像什麼：

const enhance = compose(
    branch(

    // evaluate condition 

    ({ targetResource, searchIsAllowedForMapArea }) => 
     Boolean(!searchIsAllowedForMapArea || targetResource != 'ROUTE'), 

    // HoC if condition is true 

    graphql(RoutesWithinQuery, { 
     options: ({ displayedMapRegion }) => ({ 
     variables: { 
      scope: 'WITHIN', 
      targetRegion: mapRegionToGeoRegionInputType(displayedMapRegion) 
     }, 
     }), 
     props: ({ ownProps, data: { loading, viewer, refetch } }) => ({ 
     routes: viewer && viewer.routes ? viewer.routes : [], 
     refetch, 
     loading 
     }) 
    }) 
) 
); 

Explore = enhance(Explore);

來源

2017-08-23 23:38:14

我有一個類似用途的情況下，我想，當用戶點擊只加載數據。

我還沒有嘗試給出012Query的建議by pencilcheck above。但我在其他地方看到過同樣的建議。我會嘗試，但在此期間，這是我得到了它的工作based off a discussion on github：

./loadQuery.js

注：我使用的是跳躍指令：

const LOAD = ` 
query Load($ids:[String], $skip: Boolean = false) { 
    things(ids: $ids) @skip(if: $skip) { 
    title 
    } 
`

LoadMoreButtonWithQuery.js

這裏我使用withState高階函數添加一個標誌和一個標誌設置器來控制skip：

import { graphql, compose } from 'react-apollo'; 
import { withState } from 'recompose'; 
import LoadMoreButton from './LoadMoreButton'; 
import LOAD from './loadQuery'; 

export default compose(
    withState('isSkipRequest', 'setSkipRequest', true), 
    graphql(
     gql(LOAD), 
     { 
     name: 'handleLoad', 
     options: ({ids, isSkipRequest}) => ({ 
      variables: { 
      ids, 
      skip: isSkipRequest 
      }, 
     }) 
     } 
    ), 
)(Button);

./LoadMoreButton.js

在這裏，我必須手動「翻轉」的標誌添加使用withState：

export default props => (
    <Button onClick={ 
     () => { 
      props.setSkipRequest(false); // setter added by withState 
      props.handleLoad.refetch(); 
     } 
    }>+</Button> 
);

坦率地說，我這個有點不高興，因爲它引入了一套新的佈線（由「withState」組成）。它也沒有經過測試 - 我剛剛得到它的工作，我來到StackOverflow檢查更好的解決方案。

來源

2017-11-19 10:45:11

你如何動態地控制反應apollo-客戶端查詢啓動？

回答

相關問題