How to refresh a Cell due to stale data?

Get Help and Help Others
1

I have a queue of items I’m hydrating in a Cell, with the first item in the queue being the showcased item and the remaining being under a “next up” list. The Cell makes a GET request to a third-party API in the background to get the data based on this tutorial.

There is a countdown associated with each item in the queue, and I’m using react-countdown to display this countdown for only the showcased element. When that countdown completes and the next item in the queue is to be showcased, I want the Cell to refresh and rehydrate as the prior data could be stale.

I’m quite new to both React and RedwoodJS so I’m not sure if this is something that should be handled based on the React lifecycle or Redwood APIs. I looked into calling refetch, but kept getting errors. What do you recommend?

Below is a simplified snippet of my code:


const renderer = ({ hours, minutes, seconds, completed }) => {
    if (completed) {
        // do some refreshing here?
    } else {
        return <span>{hours}:{minutes}:{seconds}</span>
    }
  };

export const Success = ({ mapRotation }) => {
    return (
        <section>
            <h2>
                Currently <span class="current-map">{mapRotation.map}</span> <span class="current-map-time">for <Countdown date={mapRotation.next[0].start} renderer={renderer} />
                </span>
            </h2>

            <h3>Schedule</h3>
            <table className="schedule-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Map</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        mapRotation.next.map(upcoming => {
                            let startTime = dayjs(upcoming.start);

                            return (
                                <tr>
                                    <td>{startTime.format('MM/DD hh:mm A')}</td>
                                    <td>{upcoming.map}</td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        </section>
    )
}
2 Likes
2

Hey @sachanganesh :wave:

It sounds like the refetch prop might be able to help you here. Along with the data (mapRotation in your example) returned from the query, a Cell’s Success component actually gets passed a lot of props; refetch is one of them.

Screen Shot 2021-01-26 at 11.58.11 PM
Screen Shot 2021-01-26 at 11.58.11 PM754×504 59.7 KB

So you could try something like…

export const Success = ({ mapRotation, refetch }) => {
  return (
    ...

    Currently ... <Countdown ... renderer={() => renderer({ refetch })} />

Modifying rerenderer to call refetch in the if (completed) clause.

Here’s the associated apollo docs on the topic for good measure:

Let me know if it works!

4 Likes
3

That was brilliant, thanks so much!

I didn’t know that’s how you’re supposed to import refetch, and it makes more sense now. I was trying to use useMutation and useState to help me refresh the data, but this way is so much easier.

Thanks again!

3 Likes
4

Note for those reading for later versions of Redwood, the refetch parameter is inside queryResult passed to Success now:

export const Success = ({
  mapRotation,
  queryResult: { refetch },
}
3 Likes