1

考虑以下带有 Relay Modern 的 ReactJS 组件：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { graphql } from "react-relay";
import { QueryRenderer } from "react-relay";

import environment from "../../relay/environment";

const CustomersQuery = graphql`
    query CustomersQuery($versionId: ID!) {
        viewer {
            customers {
                id
                name
            }
        }
    }
`;

class Customers extends Component {

    handleRefresh = () => {
        /// ???? ///
        How to force relay to refetch data here ?
        /// ???? ///
    };

    getCustomer = (customer) => {
        return (
                <div>
                    <p>Customer Data:</p>
                    <p>Id: {customer.id}</p>
                    <p>Name: {customer.name}</p>
                </div>
                );
    }

    handleContent = props => {
        let customers = props.viewer.customers.map(customer => {
            return this.getCustomer(customer);
        });

        return (
                <div>
                    <button type="button" onClick={this.handleRefresh}>
                        Reload Screen
                    </button>
                    {customers}
                </div>
        );
    };

    render = () => {
        return (
            <QueryRenderer
                environment={environment}
                query={this.props.query}
                render={({ error, props }) => {
                    if (error) {
                        throw new error;
                    } else if (props) {
                        return this.handleContent(props);
                    }

                    return <p>>Loading...</p>;
                }}
            />
        );
    };
}

export default Customers;

强制组件在handleRefresh处理程序中重新加载中继数据的正确方法是什么？

4

2 回答 2

0 
<QueryRenderer
    environment={environment}
    query={graphql`
    query  MyQuery  
    {  
      {  
        id                
        name                  
        caption                  
        url              
      }       
    `}
    variables={{isUpdate: this.state.isUpdate}} //Change the state in case you want latest response, this variable will be ignored at the server
    render={({error, props}) => {

        if (error) {
           console.error(error);
           return <div>Error!</div>;
        }
        if (!props) {
           return <div>Loading...</div>;
        }
        console.log("response from server --->" , JSON.stringify(props))
        return <div></div>
        }}
/>

您可以在 api 调用中添加一个参数并将状态传递给该参数，更改状态以从服务器获取最新响应。

于 2018-11-12T09:42:30.110 回答
0

我建议您将您的 handleContent 提取到一个新组件并使用来自 relay 的 createRefetchContainer HOC。然后中继将注入一个道具，您可以使用它来触发重新获取，例如： props.relay.refetch(...)

见中继文档

于 2019-03-31T10:56:56.123 回答