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.
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?
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?
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?
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:
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.
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.