爲什麼Relay Modern QueryRenderer渲染道具未定義？

這是我第一次嘗試使用Relay Modern。從PostgraphQL GraphQL Server獲取特定用戶。它是成功，但沒有獲取數據傳遞給渲染功能：爲什麼Relay Modern QueryRenderer渲染道具未定義？

import {createFragmentContainer, QueryRenderer, graphql} from 'react-relay' 
import environment from 'environment' 

@CSSModules(styles) export default class Profile extends Component { 
    render() { 
    var {props: {children}} = this 
    return (
     <QueryRenderer 
     environment={environment} 
     query={graphql` 
      query ProfileQuery { 
      userById(id: "f0301eaf-55ad-46db-ac90-b52d6138489e") { 
       firstName 
       userName 
      } 
      } 
     `} 
     render={({error, relayProps}) => { 
      if (error) { 
      return <div>{error.message}</div> 
      } else if (relayProps) { 
      ... 
      } 
      return <div>Loading...</div> 
     }} 
     /> 
    ) 
    } 
}

只有「正在加載...」的呈現方式。

我猜測，因爲它成功獲取數據，graphql服務器和環境是好的。

我沒有使用React 16，該項目也使用Redux。

任何建議，請問爲什麼relayProps沒有價值（例如relayProps.user）？

還有一件事可能會有所幫助，環境（文件）位於主應用程序中，並且組件位於導入的npm軟件包中（要在多個應用程序中共享）。如上所述，查詢似乎工作正常，所以我不認爲這是一個問題。我也在包上運行relay編譯器，但不是主應用程序，因爲那裏沒有中繼組件。

萬一需要它的環境設置使用：

const { 
    Environment, 
    Network, 
    RecordSource, 
    Store, 
} = require('relay-runtime') 

// Instantiate Store for Cached Data 
const store = new Store(new RecordSource()) 

// Create Network for GraphQL Server 
const network = Network.create((operation, variables) => { 
    // GraphQL Endpoint 
    return fetch(config.gqlapiProtocol + "://" + config.gqlapiHost + config.gqlapiUri + "/a3/graphql" , { 
    method: 'POST', 
    headers: { 
     'Content-Type': "application/json", 
     'Accept': 'application/json', 
    }, 
    body: JSON.stringify({ 
     query: operation.text, 
     variables, 
    }), 
    }).then(response => { 
    return response.json() 
    }) 
}) 

// Instantiate Environment 
const environment = new Environment({ 
    network, 
    store, 
}) 

// Export environment 
export default environment

來源

2017-10-15 Ashley Aitken

你確定你的網絡層被稱爲？。你在response.json（）中看到了你的數據和/或錯誤嗎？在我的情況下，我有一個後續的'.then（json => {0}允許繼電器onError被解僱，如果在響應中出現錯誤 //請參閱https://github.com/facebook/relay/issues/1816 //注意：這些數據可能包含值甚至當錯誤存在如果（json.errors && json.errors.length> 0）{ 返回Promise.reject（JSON）; } 返回Promise.resolve（JSON）; }）' –

是的，我在響應中看到正確的數據。這就是爲什麼我覺得自信網絡沒問題。調用渲染時無錯誤。謝謝您的意見。我會嘗試你的建議，很好的補充。 –

props不relayprops

render={({ error, props }) => { 
     if (error) { 
     return <div>{error.message}</div>; 
     } else if (props) { 
     ... 
     } 
     return <div>Loading...</div>; 
    }}

和

fetch(GRAPHQL_URL, { 
    method: 'POST', 
    get headers() { 
    return { 
     'Content-Type': 'application/json', 
     'Accept': 'application/json', 
    }; 
    }, 
    body: JSON.stringify({ 
    query: operation.text, // GraphQL text from input 
    variables 
    }) 
}) 
    .then(response => response.json()) 
    .then((json) => { 
    // https://github.com/facebook/relay/issues/1816 
    if (operation.query.operation === 'mutation' && json.errors) { 
     return Promise.reject(json); 
    } 

    return Promise.resolve(json); 
    }) 
);

來源

2017-10-25 05:10:17

謝謝，但我不確定參數（道具，relayProps，x，y，z，...）的名稱在這種情況下有什麼區別？我認爲代碼只是定義一個函數，該函數將帶有兩個屬性的解構對象並在函數中使用這些屬性。如果我錯了，請糾正我。 –

'render = {（{error，props，retry}）=> {}}或者render = {（relayProps）=> {const {error，props，retry} = relayProps; }}' 你明白嗎？ –

爲什麼Relay Modern QueryRenderer渲染道具未定義？

回答

相關問題