Query doesn't wait for Mutation to finish

[garrett-thompson]

I have a component like so:

<Connect
  query={query(getItemsQuery)}
  mutation={{
    updateItem: mutation(updateItemMutation)
  }}
  children={({ data, updateItem }) => {
  ...

When I fire the updateItem mutation, the getItems query is immediately reran, giving me items back before the mutation finishes. This results in a weird ux where a user edits a field, hits "save" (updateItem), and the field flashes back to it's old value, then to the new value again.

Is the query supposed to fire again before the mutation completes?

[kitten]

Can you try whether this is still an issue with 0.3.0-next1 please? You can install it using the “next” tag.

[garrett-thompson]

Yea, still doing it on 0.3.0-next1.

When I add if (data) console.log("test"); inside the render prop, then fire the mutation once (via onClick), I see this in the console:

Seems a little excessive.

[kitten]

I think we'd need a reproduction on CodeSandbox to confirm this. There's only two calls to setState as a result of a mutation. Although afterwards a refetch on the query might cause two additional, but separate, rerenders of course.

There's also the case of calling query and mutation inline in your render method. This way you might accidentally trigger a refetch or an update (the latter in the best case scenario), so try to pull that out of your component, if possible, or into an instance variable and see if it improves the situation.

https://github.com/FormidableLabs/urql/blob/master/src/components/client.tsx#L57-L62

[kitten]

@mellogarrett any update? It'd be great if we could get a CodeSandbox running for this

[garrett-thompson]

Hey @kitten I'm sorry, I ended up just using Axios to make graphql requests from componentDidMount rather than on every render via urql's render prop.

[kitten]

@mellogarrett Alright, since this is not reproducible right now and stale I'll close the issue. Sorry about that, let's see if someone else hits a similar case in the future