How do you force a cell to re-render?

I am writing a super basic application that defines a model for Contact.
Then I create a page name Contact where I show 2 things:

  1. ContactForm - a Form that allows you to add contact to the database
  2. ContactsCell - A cell that fetches all contacts from the database and render it on the screen.

At the moment, when I add contacts in the ContactForm, the contact is added to the database but ContactsCell does not update. If I refresh the page, the ContactsCell data is updated.

Is this a known issue, and can someone suggest if there is a work around for this?

Hi @asdethprime.

It could be that you need to refetch after a mutation as described here:

RedwoodJS v0.20.0 🚀

It notes:

tl;dr : if things with your App’s CRUD rendering seem broken after upgrading, you’ll need to update the Mutations in your components to use Apollo’s new features like refetchQueries :

5 Likes

Awesome thank you heaps, added the 2 mentioned lines to the useMutation hook and it’s all re-rendering as expected.

Seriously, thanks heaps :slight_smile:

const [create, { loading }] = useMutation(CREATE_CONTACT_MUTATION, {

onCompleted: () => {

  navigate(routes.contact())

},

refetchQueries: [{ query: QUERY }],

awaitRefetchQueries: true,

})

1 Like

Glad to help and that all is working!

what if the QUERY needs an input param like my case?

Thanks

That wouls look something like this

  refetchQueries: [
      { query: URLQUERY, variables: { id: urlId } },
      { query: QUERY, variables: { slug: slug } },
    ],

Thanks! @shansmith01