React-Apollo，不要運行組件加載查詢

我正在使用真棒https://github.com/apollographql/react-apollo庫，我試圖看看是否有一個更好的約定來加載數據到組件比我現在做的。React-Apollo，不要運行組件加載查詢

我已經設置了我的部件與阿波羅HOC將數據加載到我的部件，像這樣：

const mainQuery = gql` 
    query currentProfileData($userId:String, $communityId:String!){ 
    created: communities(id:$communityId) { 
     opportunities{ 
      submittedDate 
      approvalDate 
      status 
      opportunity{ 
      id 
      } 
     } 
    } 
    } 
`; 
const mainQueryOptions = { 
    options: { 
    variables: { userId: '_', communityId: '_' }, 
    }, 
}; 

const ComponentWithData = compose(
    graphql(mainQuery, mainQueryOptions), 
)(Component);

這種設置的偉大工程，但也有一些問題。

我結束了總是運行兩次的查詢，因爲我需要將道具傳遞給apollo重新提取查詢。我還必須傳入一些虛擬數據（又名「_」）以防止無用的數據獲取。
我最終不得不在componentWillReceiveProps中做一些奇怪的檢查，以防止多次加載查詢。
- 我不能使用跳過選項的查詢，因爲這可以防止再取出功能在傳遞。

我回避了HOC一起，手動運行的短直接通過apollo查詢，我該如何解決？

來源

2017-08-04 Justin

如果您正在使用組件的道具作爲refetch調用中使用的變量，則實際上有一個更清晰的方法。 options屬性實際上可以是一個接收組件的道具的函數。這可以讓你從傳遞給你的組件的道具中派生你的變量。它看起來像這樣：

const mainQueryOptions = { 
    options: ({ userId, communityId }) => ({ 
    variables: { userId, communityId }, 
    }, 
});

來源

2017-08-04 17:04:35

這樣的哇。我從來不知道你能做到這一點。不知道我是怎麼錯過的！我做得更深一點，並發現你可以有條件跳過，解決我的另一個主要問題。非常感謝！ – Justin

只是一點點跟進。

有了@daniel的見解，我能夠解決我的兩個主要問題，使用道具運行查詢，並有條件地跳過查詢，直到準備就緒。我只想發佈我的最終代碼結果。正如你可以爲這兩個選項設置函數一樣，它可以幫助你很多。

const mainQueryOptions = { 
    skip: ({ community: { id: communityId } }) => !communityId, 
    options: ({ community: { id: communityId }, user: { id: userId = '_' } }) => ({ 
    variables: { userId, communityId }, 
    }), 
};

你可以在這裏阿波羅API頁面上找到更多的信息：http://dev.apollodata.com/react/api-graphql.html#graphql

來源

2017-08-04 18:01:03 Justin

React-Apollo，不要運行組件加載查詢

回答

相關問題