Rerun Cell Query

Good chance I’m doing it wrong. So tell me if my approach is off.

I’m basically trying to merge the tutorial with the Weather API cookbook with multiple requests (just to build out the feature set for the tool I’m actually trying to build).

That is:

  • Multiple form inputs
  • That when submitted look in the DB for matching entries
  • That if they’re not found, hit an API to create a DB entry
  • Then show the either found or created entry

It’s going well so far. My cell runs a query, and if the query returns empty, i have the Create mutation running inside the Empty component. (This is the “maybe in doing this in the wrong place/way part).

If the entry exists the first time, it returns the success result like it should.

Only problem I have is that I don’t know how to make the component reload from the Empty state to the Success state, after it has created a DB entry.

Hi @SimeonGriggs! Excited you’re taking Redwood for a spin. Sounds like the perfect kind of project to get up and running as well.

Here’s a couple threads with conversations about updating cells. Hopefully they can help with a next step:

It’s going well so far. My cell runs a query, and if the query returns empty, i have the Create mutation running inside the Empty component. (This is the “maybe in doing this in the wrong place/way part).

^^ If I understand correctly, I’m not sure I’d handle this within the component. Rather, I’d add a function to the Service that handles the “Hey, does this thing exist? Ok, then do this…” logic. You could likely use your existing query and mutation. Then all the Cell has to do is handle what’s returned instead of the logic + refresh (plus refresh-logic). You’d be creating a custom function similar to what is done in the Weather Cookbook for api/src/services/weather/weather.js. Make sense? Helpful?

Feel free to post some code as well!

Thanks for the links I’ll take a look.

I was initially trying to do the mutation inside a service, but was having dramas with the useMutation hook there. Where I can get it working inside a Cell but it doesn’t feel right to do there.

@SimeonGriggs You can only use the useMutation hook inside a react component. Was that what you meant by having dramas using it there? (I guess I’m asking, by services, did you mean services on the api side?)

And regarding the doesn’t-feel-right part, our todo app uses useMutation inside a cell:

Does having that example make you feel better about it? Or does it still feel weird?

Yes that’s right. I was getting “window is not defined” and linting errors trying to use useMutation in the api service.

That code does make me feel better thanks :joy: once I have this demo working I’ll share…

1 Like

So looking at this, the mutation is there in the Cell, but it doesn’t refresh the Cell to move it from one state to another — like Error to Success — which is what I’m looking to do.

Are there examples of useMutation (or something like it) inside an API Service?

Got it! This thread’s references to refreshing the cache were correct.

So now inside the Empty component of my Cell – where I fetch from an external API and create a new entry in the database – I have useMutation setup like this:

const [create] = useMutation(CREATE, {
  refetchQueries: [
    {
      query: QUERY,
      variables: { id },
    },
  ],
})

At the top of the Cell I have two queries: QUERY and CREATE.

The initial QUERY looks for a reference in the database. So if nothing is found, the Empty component is loaded where I do the CREATE mutation. Problem is the initial QUERY is cached with the null response.

So with the above, when CREATE runs, the cached version of the initial QUERY is updated too. Which kicks the Cell over into the Success component.

And you get nice visual feedback of instant-loading for db entries that were found, and the Empty component displays some text while waiting for the fetch and create to finish, before loading its entry also.

6 Likes

Nice work! And thanks for sharing the process + results here for others to follow.

:rocket:

Plenty of times I’ve googled something only to find the time I wrote the answer and had since forgotten. It’s a note to self :joy:

2 Likes

That’s a very clean solution indeed.

For the sake of “documenting”, I was investigating a similar need in my app, eventually I realized that all the components declared in a Cell will inherit all arguments from the Query component’s render function of Apollo’s Graphql, which includes refetch:

Which was nice, but the solution you come up with is far better.
I’d keep the note on the refetch in case of a ‘Refresh’ button.

1 Like

This helped me a bunch. Thanks @SimeonGriggs for sharing this.

@SimeonGriggs This is really nice looking! Would you be willing to share the whole Cell ?

I’ve been working on ways to encapsulate mutation within cells https://github.com/redwoodjs/redwood/pull/4594