Way to fire requests using useQuery with an input onChange?

[jonahallibone]

One of my endpoints does a search of the db to match with %LIKE%. I'm unsure how to write my tRPC query so that it only get's called when the user input changes. I am using Next.js and set it up with the query hooks. I couldn't find any documentation about this. Specifically, I am trying to use this with react-select in order to populate the options list as a user types. Thanks!

This was about as far as I got until I realized there's no imperative way to call this query with the default Next.js set up from the guide. I figured I could perhaps set up a vanilla client as well, but was unsure if that was the best way to approach this problem.

  const { refetch } = trpc.useQuery(["company.find", {}], { enabled: false });

  const getOptions = async (inputValue: string) => {};

  return (
    <FormControl isInvalid={!!error} id={id}>
      <FormLabel>{label}</FormLabel>
      <AsyncCreatableSelect
        colorScheme="purple"
        tagVariant="solid"
        name={name}
        ref={ref}
        onChange={onChange}
        onBlur={onBlur}
        value={value}
        onCreateOption={onCreateOption}
        isClearable
        loadOptions={getOptions}
        {...props}
   />
)

[discoverlance-com]

I have quite similar challenge, in which case, after a button is clicked I call a function that uses the useQuery hook, fetches data and then shows a modal. I had an error with calling the hook in the function which did not work, I want to actually try what you have here to see if it works for me. But yes, would be very good if we have the contributors suggestion on this or such use cases.

My function

const showModal = async(id: string) => {
  trpc.useQuery(["company.find", {id}], {
    onSuccess(data) {
       // display the modal
       displayModal({content: data})
    }
  });
}

<button onClick={() => showModal('some-id')}>Show</button>

[KATT]

This should work:

import { useRouter } from 'next/router';

function stringOrNull(str: unknown) {
  if (typeof str === 'string') {
    return str;
  }
  return null;
}

function Search() {
  const router = useRouter();
  // We pick the current query string from the router instead of `useState()`
  // Allows for reloading the page to see the same search results & to link to it
  const q = stringOrNull(router.query.q)?.trim();
  const query = trpc.useQuery(['company.find', { q }], {
    // Enabled if we have a search query
    enabled: Boolean(q),
  });

  return (
    <>
      <input
        type="search"
        name="q"
        defaultValue={q}
        onChange={(e) => {
          // In a real app, you'd probably want to debounce this using something like a `useDebouncedCallback`-hook
          router.push(
            {
              query: {
                ...router.query,
                // Replace query string with new value
                q: e.target.value,
              },
            },
            undefined,
            {
              // Prevent reloading extra stuff and changing the scroll position
              shallow: true,
              scroll: false,
            },
          );
        }}
      />
      <h3>Query results</h3>
      <pre>{JSON.stringify(query.data ?? null, null, 4)}</pre>
    </>
  );
}

[KATT]

I wouldn't use a mutation for reading data, better to use a conditional query

[airtonix]

Question you have to ask yourself is why are you doing a query? to get a result no?

get a result is async? what are you doing with the result? nothing? then shouldn't it be a mutation?

if not then you're doing something with the result, so you should use the conditional query approach because you'll change state anyway, and you should be making your components more declarative instead of imperiative.

function PropertyList({ searchParams, selectedPropertyId, onPropertyClick, onSubmit }) {
  const { data: searchResults, error, isFetching } = trpc.property.list.useQuery(
    { filter: searchParams },
  })
  const {
    data: selectedProperty,
    error: selectedPropertyError,
    isFetching: isFetchingSelectedPropert
  } = trpc.property.detail.useQuery(
   { id: selectedPropertyId },
   { enabled: !!selectedPropertyId}
  )

  const { handleSubmit: validateForm } = useForm<SearchFormData>({});
  const handleSubmit = validateForm(onSubmit);
  
  return (
    <div>
      <form onSubmit={handleSubmit}> ... </form>
      {!!searchResults && (
        <div className="magically-awesome-css">
        {searchResults.map((property => (
          <article
            key={property.id}
            onClick={() => onPropertyClick(property.id) }
          >
            {property.title}
          </article>
        )}
       </div>
      }
      {selectedProperty && (
        <div className="more-magically-awesome-css">
         {selectedProperty.title} 
        </div>        
      )}      
    </div>
  )
}

[davit-b]

This is a really important github thread - could we please add this to the docs? I've googled over an hour before stumbling upon this and reaching clarity.

I was very close to posting on the Discord asking for help.

[Bloodyaugust]

This would be a lot easier if we had something like RTK's useLazyQuery

[wmonecke]

@Bloodyaugust man I have been looking for something similar for a while thinking it would be an obvious feature that trcp / tanstack has

[SMUEric1127]

Guyss! I finally think of a great way to do this! I was writing it using next js which has a api exported so the code isn't gonna look like the same as what you guys have, but I hope you guys can get the logic of how I did it, since useQuery is just a wraper around the react-query, and it has the refetch option. Anyone feel free to translate this next js approach to fit the trpc traditional code.

export const TestPage = () => {
    // State to hold the value
    const [value, setValue] = useState();

    // Query to fetch company data based on the value
    const companyQuery = api.company.getCompany.useQuery({
        companyId: value,
    }, {
        onSuccess: (e) => {
            // Update the data here after fetch/re-fetch
            console.log(e);
        }
    });

    return < input
    type = "search"
    onChange = {
        (e) => {
            // either call refetch here, or update the value
            setValue(e);
        }
    }
    />
};

Leave a like if it helpful! It took me so long to think about this.

[sebasptsch]

If the parameter in the useQuery() hook changes it should automatically refetch. Otherwise using useUtils() with refetching would be ideal.

[SMUEric1127]

You were absolutely right. I looked at it again and thought if we put onSuccess it would perform what the OP were asking for! (I edited above)

[sebasptsch]

Be warned that onSuccess is being removed from useQuery in the next update.

[SMUEric1127]

that is very sad since I just got used to react query recently, do you know where you get this information from? Thanks!

[SMUEric1127]

I'm also thinking about other way to do this if onSuccess will be deprecated soon? do you have any other solution?

[BrendanC23]

Is there a way to make a direct call to the server that doesn't involve using useQuery? I want to run a query in an on Cick event handler, and then want to do something with the result immediately.

I basically ust want to use TRPC to define a standard API endpoint that I can query, await a response, and then use the response within the event handler. That way, I don't need to create a TRPC procedure to execute a query with React Query and then create a separate API endpoint that runs the same query.

Could this be done by making a regular fetch call to the endpoint created by TRPC? That would bypass the need for hooks or separate state to hold the response. Is there a way to make it typesafe?

My actual use case involves executing a query within the refine call of a Zod schema used in React-hook-form (and uses Electron TRPC instead of an HTTP link). So far, the most straightforward option seems to be to create a separate IPC channel that makes a TRPC call from the server using createCaller and then await the response in the refine handler.

[BrendanC23]

That seems like the only option, but it loses some type-safety because you can call the API endpoint with anything.

[Nick-Lucas]

The vanilla client is available even when using the react query integration. useUtils().client.foo.query()

RQ would still usually recommend you set up some state and drive useQuery with it so you can benefit from reactivity and caching/deduplication, but the option is there

Also nothing stopping you creating a dedicated vanilla client outside of the react tree if you really need it

[BrendanC23]

Thanks for that suggestion. It worked great. Note to anyone else reading this: the function you want is .fetch() (not query()). See the useUtils docs. You can do something like this:

export function Component(form: Form) {
    const utils = trpc.useUtils();

    const onInputChanged = async () => {
        const value = await utils.namespace.myQueryFunction.fetch();

        form.setValue("value", value);
    }

    return (
        <Input onChange={onInputChanged} />
    );
}

[khatija2]

Hi Brendan (and everyone else), I've been having a similar issue, which I am struggling to resolve. I'm trying to fetch 'places' based on input change (like an address search). The server is returning a result but it is not being logged in the frontend. I believed the issue was that there were too many queries with every letter typed so tried debouncing the search value but that broke the app (too many re-renders). So I chose a condition of {enabled: searchValue.length === 3 || searchValue.length === 5}) instead. However, if the user types a 4 letter word, it appears to either initiate a new query and the data from the previous query disappears so that the result is undefined or simply make the data from the backend unavailable (I'm not sure?). Also, there is a significant lag between getting the query result on the backend and it being available on the frontend after only 3 letters are typed.

This is the query I used in my component:

const { data: results, isLoading} = api.places.getValue.useQuery({searchValue}, {enabled: searchValue.length === 3 || searchValue.length === 5})

@BrendanC23, do you think your suggestion would work and if so from where do I import trpc in the t3 structure? I cannot find a trpc variable of which where useUtils is a property :(

Thanks in advance for any help that can be offered! I'm so frustrated with this! :(

[BrendanC23]

Here's the useUtils() docs. The function was originally called useContext(), so if you're using a version of TRPC less than 10.41.0, that is the name of the function you want.

I'm not very familiar with the T3 stack. Based on these docs, they do const userQuery = api.users.getById.useQuery(query.id);, and name the variable api instead of trpc. This means that you probably want api.useUtils()/api.useContext().

What if you try api.places.getValue.useQuery({searchValue}, {enabled: searchValue.length >= 3})? This would handle the case where the length is 4.

Based on what you've described, I think using the above and calling the getValue function normally as a hook instead of putting it in an event handler with the useUtils()/useContext() should work. If using a debounce mechanism is causing too many re-renders, fixing that seems like a good place to start.

Also, there is a significant lag between getting the query result on the backend and it being available on the frontend after only 3 letters are typed.

How many results are being returned? Could that be a bottleneck?