RTK Query: useLazyQuery to access query result in a separate component

[ghost]

Lets say I have a form that sends a GET request to:

https://myapi.com/person?first=<firstName>&last=<lastName>

import React, { useState } from 'react'
import { myApi } from '../redux/myApi'
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'

const FormExample = () => {
  const [formFields, setFormFields] = useState({})
  const [trigger, result, lastPromiseInfo] = myApi.useLazyGetPersonDetailsQuery()

  const onFormFieldChanged = (e) => {
    e.preventDefault()
    setFormFields({
      ...formFields,
      [e.target.id]: e.target.value
    })
  }

  const onFormClickSubmit = (e) => {
    e.preventDefault()
    trigger(formFields)
  }
  
  return (
    <div className="myForm">
      <Form>
        <FormGroup row>
          <Label for="first">First Name</Label>
          <Input
            type="text"
            id="first"
            onChange={(e) => onFormFieldChanged(e)}
          />
        </FormGroup>
        <FormGroup row>
        <Label for="last">Last Name</Label>
          <Input
            type="text"
            id="last"
            onChange={(e) => onFormFieldChanged(e)}
          />
        </FormGroup>
      </Form>
      <Button
        onClick={(e) => onFormClickSubmit(e)}
      >
        Submit
      </Button>
    </div>
  )
}
export default FormExample

How should I develop with the useLazyQuery hook so that I can access the query state in a parent component? I need to access isFetching a for a progress bar in a parent component.

[phryneas]

• either move state up to that parent or move that query term into redux
• that state should only change as a result of your submit button
• use a normal query that does not get triggered before that state is set in both components

[ghost]

Ok I'm trying to access the query state in another component with select:

const { isError, status } = myApi.endpoints.getPersonDetails.select()(state => state)

But the useLazyQuery trigger function doesn't subscribe the component to the cached query result and query state?

[phryneas]

Are you calling the trigger function without an argument or with undefined?
Because your selector usage will retrieve the cache entry for "no argument or undefined".

Also, that is completely different from my suggested solution. Why do you make it extra complicated?

[ghost]

I'm calling trigger with an argument, which is an object. I will lift the state up to the parent, but I'd prefer accessing the lazy query status with hooks. Specifically so I can have a global progress wheel in a top level menu.

Here is what select returns when a new component mounts and before trigger gets called:

{status: "uninitialized", isUninitialized: true, isLoading: false, isSuccess: false, isError: false}

I can post a full example of this implementation later.

[phryneas]

If you call trigger(foo) you will have to

- const { isError, status } = myApi.endpoints.getPersonDetails.select()(state => state)
+ const { isError, status } = myApi.endpoints.getPersonDetails.select(foo)(state => state)

if you call trigger(bar) you have to

- const { isError, status } = myApi.endpoints.getPersonDetails.select()(state => state)
+ const { isError, status } = myApi.endpoints.getPersonDetails.select(bar)(state => state)

There is not just one cache entry, there could be dozens of them and you have to select the right one. And you need the triggering object for that.

[Kubik-a]

• either move state up to that parent or move that query term into redux

  • that state should only change as a result of your submit button

  • use a normal query that does not get triggered before that state is set in both components

@phryneas Could you please explain how to proceed with the last point, with skip parameter ?