optimistic-gold

Return latest result from query key?

My end goal is to have a query that sets a current search term, with a query key of ["query", searchTerm], and another query that returns the latest "query" search term, so the latest query of key ["query", *]. I'd like to do this so that I can keep a "history" of previous search terms, since it's computationally expensive to run them. I know it's not a very good explanation, but I hope it makes sense! The tl;dr is that I need a component "subscribe" to all queries that start with "query" but only return the newest one.

10 Replies

optimistic-goldOP•3y ago

i can't quite figure out the terminology to google it/find in the docs

dependent-tan•3y ago

I'd use the actual current query key to subscribe to the active/latest query data and just store a list of previous search terms in application state, personally. You can change the query key search term to that search term to retrieve the cached data under that key

optimistic-goldOP•3y ago

ok, makes sense. Let's say I have a mutation like this,

import { useMutation } from "@tanstack/react-query";
import { useQueryClient } from "@tanstack/react-query";

const setQuery = async (query) => {
  try {
    const response = await fetch(
      "https://something.functions.supabase.co/search",
      {
        method: "POST",
        body: JSON.stringify({ query: query }),
      }
    );

    return response.json();
  } catch (err) {
    throw err;
  }
};

export default () => {
  const queryClient = useQueryClient();

  return useMutation((query) => setQuery(query), {
    mutationKey: ["query"],
    onSuccess: (data) => {
      queryClient.setQueryData(["query"], () => {
        data;
      });
    },
    onError: (error) => {
      console.log(error);
    },
  });
};

import { useMutation } from "@tanstack/react-query";
import { useQueryClient } from "@tanstack/react-query";

const setQuery = async (query) => {
  try {
    const response = await fetch(
      "https://something.functions.supabase.co/search",
      {
        method: "POST",
        body: JSON.stringify({ query: query }),
      }
    );

    return response.json();
  } catch (err) {
    throw err;
  }
};

export default () => {
  const queryClient = useQueryClient();

  return useMutation((query) => setQuery(query), {
    mutationKey: ["query"],
    onSuccess: (data) => {
      queryClient.setQueryData(["query"], () => {
        data;
      });
    },
    onError: (error) => {
      console.log(error);
    },
  });
};

How would i subscribe to it using useQuery, since it requires an update function?

dependent-tan•3y ago

The query will automatically update if the data in the cache for that query updates

optimistic-goldOP•3y ago

right, but I guess I'm not grasping how to even subscribe to the query... like i'm trying to have a useSetQuery, and a useQuery, completely seperate so the setQuery part works, but how do I subscribe to a query without using useQuery (which requires an updater function) it's hard for me to explain what i'm thinking...i want to be able to update the query using a search term, but also subscribe to the results, without updating the search term, in another component

sensitive-blue•3y ago

useQuery is what creates the subscription. I think I also don't follow what you're trying to do

optimistic-goldOP•3y ago

ok so say I have one component, a text input box and when the user hits enter, fires off a mutation with the search term. Now in another component, I want to subscribe to that query without updating it, i just want the values

dependent-tan•3y ago

What query? A mutation is different to a query. If you are querying that data, you'll already be subscribing to it so when you update the query from the mutation onSuccess callback, it'll automatically update the query

optimistic-goldOP•3y ago

Ok, like...guh. Lets say i have a useQuery hook, i call it with const { data, isLoading } = useResults(searchQuery);, that passes searchQuery into the update fn, which calls the api and gets the results. All works great. But how do I do const { data, isLoading } = useResults(); without a searchQuery, to just subscribe to the data, without passing in a param? because one component doesn't know what the searchQuery is, it just wants any results of what the search box passed in

dependent-tan•3y ago

Depending on how the components are composed, it might just make sense to pass the data from the useResults hook directly to the component that needs it. Failing that, it might make sense to pass the search term to the concerned component so that it can identify which search term it needs to retrieve the data for. You could always use queryClient.getQueryData but I think either of the aforementioned suggestions would be better here

Gaming

Programming

Return latest result from query key?

Did you find this page helpful?