为什么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

你确定你的网络层被称为？。你在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); 
    }) 
);

谢谢，但我不确定参数（道具，relayProps，x，y，z，...）的名称在这种情况下有什么区别？我认为代码只是定义一个函数，该函数将带有两个属性的解构对象并在函数中使用这些属性。如果我错了，请纠正我。 –

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

为什么Relay Modern QueryRenderer渲染道具未定义？

相关推荐