Trigger cell loading state during refetch() or refetchQueries()?

Get Help and Help Others
1

I’m using either refetch() from a cell’s success prop or the refetchQueries() function inside useMutation to reload a cell’s query after a form submission. i.e. import { QUERY } from 'some/cell' and then `refetchQueries: [{ query: QUERY }].
What I’m hoping to achieve is that the cell from which the query is imported, renders its loading state whenever the query is refetched, and its error state if the refetch throws. Is there any way to do this without manually keeping and passing around these states?

Thank you

2

Hey @ziw.

Check out using beforeQuery in redwood cells - Cells | RedwoodJS Docs

After having a read of this thread - https://github.com/apollographql/react-apollo/issues/321, i think if you pass in

notifyOnNetworkStatusChange: true,

you should get the loading state to retrigger. Let me know how you get on.

2 Likes
3

hi @shansmith01 , I tried doing the following but <Loading /> still doesn’t render during refetch().

export const beforeQuery = (props) => {
  return {
    variables: props,
    fetchPolicy: 'cache-and-network',
    notifyOnNetworkStatusChange: true,
  };
};

I did find a workaround which is using the updating prop from CellSuccessProps:

export const Success = ({ updating, data}) => {
  if(updating) return <Loading />;
  return <SomeComponent data={data} />
}

This updating flag is correctly reflecting if the query is in-flight even without setting notifyOnNetworkStatusChange. Still would prefer not having to do this in the Success component. Anything else I might have missed?

4

Not that I’m aware of, but I’m no expert. I like how you have solved it