Mutation in cell refetches data and makes cell flicker

If I have a mutation in a cell that affects the cell query, the cell refetches its data. The whole cell will flicker white and rerender. This is not what I expected: Apollo is intelligent enough to update the query cache and only rerender the appropriate item(s). When I put the code in a page, it behaves how I expect.

My cell code is something like this:

export const QUERY = gql`
  query FrameworksQuery {
    frameworks {
      id
      name
      claps
    }
  }
`

const MUTATION = gql`
  mutation ClapFramework($id: Int!) {
    clapFramework(id: $id) {
      id
      claps
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }) => <div>Error: {error.message}</div>

export const Success = ({ frameworks }) => {
  const [clapFramework] = useMutation(MUTATION)

  return (
    <ul>
      {frameworks.map((framework) => (
        <li>
          {framework.name} 
          <a onClick={clapFramework({ variables: { id: framework.id } })}>👏<a/> 
          {framework.claps} 
        </li>
      ))}
    </ul>
  )
}

My page variant is here: https://github.com/njjkgeerts/redwood-pm2/blob/master/web/src/pages/HomePage/HomePage.js

Hi @nickg Yeah, that flashing is just the worst. :grimacing:

Good news: there’s a fix coming in the next release v0.20. Here’s the PR #1250.

Until then, here’s an example using beforeQuery as a possible fix.

Please keep us posted.

Cool, thanks for the update.

1 Like