TanStack Query mutations

[DJWalker42]

Tracking issue to replace any "fetch" type calls with "use" type calls when accessing the API.

According to TanStack Query Quick Start (from where I lifted this code segment), the general pattern using mutations should be something like:

function theFunction() {
  const queryClient = useQueryClient()

  const query = useQuery({ 
    queryKey: ['things'], 
    queryFn: useGetThings //the "getter" api call
  })

  const mutation = useMutation({
    mutationFn: usePostNewThing, //the editing api call
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['things'] })
    },
  })

  return (
    <div>
      <ul>{query.data?.map((thing) => <li key={thing.id}>{thing.title}</li>)}</ul>

      <button
        onClick={() => {
          mutation.mutate({
            //whatever data is required for a 'thing'
            //typically obtained from user input in a "form"
          })
        }}
      >
        Add a thing
      </button>
    </div>
  )
}

For our code the 'mutate' generally needs to occur in a form submit handler.

[DJWalker42]

Ignore the initial comment above, I was wrong.

The OpenAPI Codegen essentially uses TanStack Query under the hood such that any "use" hooks are either "queries" for "getter" calls (GET) or are "mutations" for "setter" calls (POST, PUT, ...). So to use the hooks you need to do something like:

function InvestigatorsList() : ReactElement {

    const {selectedProposalCode} = useParams();

    //this is the query hook
    const investigators = useInvestigatorResourceGetInvestigators({
        pathParams: {proposalCode: 1}
    })

    //this is this the mutation hook
    const addInvestigatorMutation = useInvestigatorResourceAddPersonAsInvestigator();

    const addInvestigator = () => {
        //use the mutation in the user action
        addInvestigatorMutation
            .mutate({
                pathParams: {proposalCode: Number(selectedProposalCode)},
                body: {
                    type: "COI",
                    forPhD: false,
                    person: {fullName: randomId(), eMail: randomId() + "@fake-domain.com"}
                }
            })
    }

    return (
        <div>
            <ul>{investigators.data?.map((investigator) =>
                <li key={investigator.dbid}>{investigator.name}</li>)}
            </ul>

            <button
                onClick={addInvestigator}
            >
               Add investigator
            </button>
        </div>
    )
}

Notice that for this specific example in our app you'd get an internal server error as the Person you are trying to add as an Investigator does not exist in our database but it shows the pattern of what is required.

[DJWalker42]

Appears that issues close when merging an associated branch into master regardless of other active branches associated with the same issue. Unsure if there's a config setting in GitHub somewhere to change this behaviour on a per issue basis? So, reopening this issue to continue for the active brach A.England is working on.

Perhaps we open a specific issue per page we want to change from using the "fetch" calls to the mutation calls.

[AllanEngland]

I've refactored the investigator panels to work with hooks and mutations instead of the fetch calls (I remain confused as to why they're exported if they don't work as expected). Some of it was straight forward and some wasn't so it's hard to say how much effort will be involved in refactoring the rest of the codebase.

I suggest we keep this ticket open as a place to monitor progress overall for this and open separate related issues when working on each page.

[DJWalker42]

I believe this is now done where possible, so I'll close this issue. We can always reopen at a later date if needed.