如何使用react-apollo運行graphQL查詢？

Question

我GraphQLServer查詢：

query { 
    sources { 
    name 
    id 
    } 
} 

返回一個對象數組，像這樣：

{ 
    "data": { 
    "sources": [ 
     { 
     "name": "bootstrap.css", 
     "id": 1 
     }, 
     { 
     "name": "normalize.css", 
     "id": 2 
     } 
    ] 
    } 
} 

試圖瞭解如何從陣營（終極版）調用。我嘗試過：

function mapQueriesToProps({ownProps, state}) { 
return { 
    data: { 
    query: gql` 
     query { 
     sources { 
     id 
     name 
     } 
     } 
    `, 
    forceFetch: false, 
    returnPartialData: false, 
    }, 
}; 
}; 

但沒有任何反應。只需加載：true。我正在使用apollo-client，並根據文檔（我認爲）將它全部連接起來。我的意思是我使用connect（mapQueriesToProps）等。

• 查詢實際上何時運行？
• 組件加載時會自動運行嗎？
• 有沒有需要等待數據返回的步驟？
• 組件知道如何等待數據？
• 返回數組是否正常？我找不到在文檔中返回數組的任何示例。
• 我只想運行一次，不做任何輪詢或任何事情。這是唯一的方法嗎？

這是我第一次測試阿波羅。任何指導表示讚賞，因爲文檔對於初學者來說相當簡單。

Answer 1

你試過命名查詢嗎？即寫query abc {而不只是query {。如果解決了這個問題，你應該提交一個關於react-apollo的問題。

如果它不起作用，您可以通過檢查控制檯是否有錯誤並檢查網絡選項卡中瀏覽器是否實際發出請求來開始縮小錯誤範圍。

Answer 2

奇怪的是，這方法對我的作品......

假設：

import gql from 'graphql-tag'; 
import { graphql } from 'react-apollo'; 

你可能只是能夠（例如）：

const getSources = gql` 
    query { 
    sources { 
    id 
    name 
    } 
    } 
`; 

export default graphql(getSources) (connect(mapStateToProps, mapDispatchToProps)(YouContainer)); 

YouContainer props.data將有您的查詢結果。

這第二方法，也可以（可能是最好的辦法）：

const getSources = graphql(gql` 
    _your_query_here_ 
`); 

const connector = connect(mapStateToProps, mapDispatchToProps); 
export default connector(getSources(YourContainer)); 

而作爲@helfer提到的，你也應該命名您的查詢。