Как форсировать перезагрузку данных ReactJS Relay Modern (принудительная выборка)?

Question

Рассмотрим следующий компонент ReactJS с Relay Modern:

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?

Answer 1

Я предлагаю вам извлечь свой handleContent для нового компонента и использовать HOC createRefetchContainer из relay. Затем реле добавит реквизит, который вы можете использовать для запуска повторного запуска, например: props.relay.refetch (...)

см. релейные документы

Answer 2

<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 и передать состояние этому параметру, изменить состояние, чтобы получить последний ответ от сервера.