如何強制重新加載ReactJS Relay Modern數據（強制獲取）？

Question

考慮以下帶有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處理程序中的Relay數據的正確方法是什么？

Answer 1

<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調用中添加add參數並將狀態傳遞給該參數，更改狀態以從服務器獲取最新響應。

Answer 2

我建議您將handleContent提取到新組件中，並從中繼使用createRefetchContainer HOC。 然后中繼將注入一個可用於觸發refetch的道具，例如：props.relay.refetch（...）

請參閱中繼文檔