[英]Why are Relay Modern QueryRenderer render props undefined?
這是我第一次使用Relay Modern。 從PostgraphQL GraphQL Server
獲取特定用戶。 它正在成功獲取數據,但未傳遞給render函數:
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)?
可能會有幫助的另一件事是,環境(文件)在主應用程序中,而QueryRenderer
和組件在導入的npm包中(在許多應用程序之間共享)。 如前所述,該查詢似乎工作正常,因此我認為這不是問題。 我還在程序包上運行了中繼編譯器,但沒有在主應用程序上運行,因為那里沒有中繼組件。
萬一需要,可以使用以下環境進行設置:
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
props
不是relayprops
props
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);
})
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.