Container is not rerendered when calling refetch

[ntelkedzhiev]

I'm using RelayCache to load the initial data and then calling refetch in componentDidMount():

 this.props.relay.refetch(refetchVariables, null, () => console.log('Refetch Done!'), {force: true})

However, the QueryRenderer does not render when the refetch is executed, nor the callback of the refetch function is called. What is more interesting is that if I wrap the refetch call into a setTimeout everything works fine:

  setTimeout(() => {
      this.props.relay.refetch(refetchVariables, null, error => console.log('Refetch done'), {force: true});
  });

Any suggestions why this is happening?

[sibelius]

QueryRenderer should be used only for the first query (on root component, like the first react component in a route)

Only your refetchContainer should rerender, check the docs https://facebook.github.io/relay/docs/en/refetch-container.html

QueryRenderer won't rerender if you won't change variables

[ntelkedzhiev]

@sibelius Issue persists even if the variables are different. The RefetchContainer does not rerender.

[sibelius]

create a small repro so we can test it

[ntelkedzhiev]

https://github.com/ntelkedzhiev/relay-refetch

[jgcmarins]

@ntelkedzhiev I've made a comment here: ntelkedzhiev/relay-refetch@2b1084f#r31043442

[ntelkedzhiev]

@jgcmarins Thanks but this is unrelated (and false according to the docs).

[ntelkedzhiev]

Any ideas?

[josephsavona]

The most likely explanation for a RefetchContainer not updating is that the data being refetched doesn't overlap with the data that the fragment is selecting - usually because the variables don't line up. I would double check the query and variables.

[jgcmarins]

relay-dev-tools can help you with RelayNetworkLogger
You can also check network tab

[ntelkedzhiev]

I did check the query and the variables. None of the usual solutions for this type of problems make sense here.

As I said above, wrapping the relay refetch call in a simple setTimeout() solves the issue which is what makes this issue "interesting". Please see the demo I referenced.

[ntelkedzhiev]

The problem is here:

relay/packages/react-relay/modern/ReactRelayRefetchContainer.js

Lines 113 to 124 in d796497

	// If the environment has changed or props point to new records then
	// previously fetched data and any pending fetches no longer apply:
	// - Existing references are on the old environment.
	// - Existing references are based on old variables.
	// - Pending fetches are for the previous records.
	if (this.state.resolver !== prevState.resolver) {
	prevState.resolver.dispose();
	this._queryFetcher && this._queryFetcher.dispose();
	this._refetchSubscription && this._refetchSubscription.unsubscribe();
	this._subscribeToNewResolver();
	}

For some reason the first refetch request passes the if. Maybe because it was initiated before the payload from the initial request (from the QueryRenderer) was received. After that happened, the initial payload rendered the props so they point to new records (compared to where they pointed to at the time of the first refetch).

The relay code makes sense so I guess I'll have to wait until the first payload is rendered and only then refetch. What do you guys think?

[xyy94813]

pass render-variables can resolve this issue in my project.

const q = { effecting_true: 1 };
const vars = {
  id: data?.id,
  disablementQ: q,
};
refetchData(vars, {
  q,
});

 export default createRefetchContainer(
  DriverDisablementCard,
  {
    data: graphql`
      fragment DriverDisablementCard_data on Driver
        @argumentDefinitions(q: { type: "JsonObject" }) {
        id
        disablements(before: null, first: 30, q: $q) {
          nodes {
            ...DriverDisablementTable_data
          }
        }
      }
    `,
  },
  graphql`
    query DriverDisablementCardQuery($id: ID!, $disablementQ: JsonObject) {
      data: node(id: $id) {
        ...DriverDisablementCard_data @arguments(q: $disablementQ)
      }
    }
  `
);

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stan-sack]

@ntelkedzhiev did you ever work a way to do this other than waiting for the first payload to render? its still an issue in latest relay.

[sibelius]

Migrate to relay hooks, if the issue still valid, open another issue