URQL Mutation, query fails, stays in fetching state

Question

I am using the URQL mutation component but it is not working the way I would expect.

Here is my component usages

return (
  <Mutation query={updateQuery}>
    {({ fetching, data, error, executeMutation }) => {
      if (error) {
          console.log("uh oh", updateQuery);
          return null
      }
      if (!fetching && !data && !error) {
          console.log("not anything , showing spinner")
          executeMutation();
          return <Spinner size={"lg"} />
      }
      if (fetching) {
          console.log("fetching , showing spinner")
          return <Spinner size={"lg"} />
      }
      if (data) {
          return ( <p>{JSON.stringify(data, null, '')}</p>)
      }
      return null;
    }}

  </Mutation>
)

So what happens is the executeQuery happens which returns a 200 OK and the following response

{
  "data": {
    "updateMyCustomer": null
  },
  "errors": [
    {
      "message": "Field 'actions.setCustomField.value' has wrong value: Invalid value.",
      "path": [
        "updateMyCustomer"
      ],
      "locations": [
        {
          "line": 2,
          "column": 3
        },
        {
          "line": 11,
          "column": 35
        }
      ],
      "extensions": {
        "code": "InvalidInput"
      }
    }
  ]
}

However I never get any data back, instead I have the console.log ("fetching , showing spinner") and nothing changes

Why am I still in fetching state? I would expect it to render the if(data) at this point.

Note I do not care about the fact that the field is invalid, I just care that I am not getting what I believe would be the correct fetch - that fetching would be done and I would have some data to analyze.

score 0 · Answer 1 · answered Jun 19 '23 at 13:27

Adding this as it might be useful to someone, I don't feel like it is the correct answer but it an ugly hack that worked for me

this is my code if I don't have any data or errors or fetching going on

if (!fetching && !data && !error) {
    const mutating = () => executeMutation();
    mutating().then(data => {
        if (data?.error) {
            globalErrorHandler(JSON.stringify(data?.error,null, ''));
            setUpdateQuery("");
        }
        if(data?.data?.updateMyCustomer?.firstName) {
            //we have data back therefore we can close
            setUpdateQuery("");
            handleClose();
            refreshCustomer(version + 1);
        }
        return data;
    })
    return (<Box w={boxSize}>
        <Spinner size={"lg"} />
    </Box>);
}

obviously most of that stuff you don't care about, but the main take aways is the executeMutation is a promise and evidently you're going to need to handle it instead of URQL.

URQL Mutation, query fails, stays in fetching state

1 Answers1