Nrthugu

Consider the following ReactJS component with 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;

What is the correct way to force the component to reload Relay data inside handleRefresh handler ?

<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>

        }}

/>

You can add add a parameter in the api call and pass the state to that parameter , change the state to get the latest response from the server.