T
TanStack•5mo ago
equal-aqua

Destructuring `createQuery` attributes causes my code to stop working

I am wondering if an issue I am dealing with is a problem with my code or the package: Let's say I have the following code in the script tag of my component: 
let query = useGetAllProducts();

if (query.isLoading) {
  console.log("loading");
}

if (query.isError) {
  console.log(query.error);
}

let searchQuery = $state("");
let filteredProducts: Product[] = $state([]);
$effect(() => {
  if (query.data) {
    filteredProducts = query.data.filter((product) => product.name.includes(searchQuery));
  }
});
let query = useGetAllProducts();

if (query.isLoading) {
  console.log("loading");
}

if (query.isError) {
  console.log(query.error);
}

let searchQuery = $state("");
let filteredProducts: Product[] = $state([]);
$effect(() => {
  if (query.data) {
    filteredProducts = query.data.filter((product) => product.name.includes(searchQuery));
  }
});
The code above works fine, when the data is available, it will render everything properly on the screen however if I try to destructure, like below: 
let { data: products, isLoading, isError, error } = useGetAllProducts();

if (isLoading) {
    console.log("loading");
}

if (isError) {
  console.log(error);
}

let searchQuery = $state("");
let filteredProducts: Product[] = $state([]);
$effect(() => {
  if (products) {
    filteredProducts = products.filter((product) => product.name.includes(searchQuery));
  }
});
let { data: products, isLoading, isError, error } = useGetAllProducts();

if (isLoading) {
    console.log("loading");
}

if (isError) {
  console.log(error);
}

let searchQuery = $state("");
let filteredProducts: Product[] = $state([]);
$effect(() => {
  if (products) {
    filteredProducts = products.filter((product) => product.name.includes(searchQuery));
  }
});
The code stops working. By "stop working" I mean: it fetches the data (as I can see the JSON retrieved from the external API in the console), but it does not render the information on the screen, as if the package is uncapable of identifying that the data is now available. Let me know if you need the full code. Edit note: Here is the implementation of useGetAllProducts: 
export function useGetAllProducts() {
  return createQuery(() => ({
    queryKey: ["products"],
    queryFn: async () => await getAllProducts()
  }));
}
export function useGetAllProducts() {
  return createQuery(() => ({
    queryKey: ["products"],
    queryFn: async () => await getAllProducts()
  }));
}
3 Replies
equal-aqua
equal-aquaOP•5mo ago
https://github.com/TanStack/query/discussions/7413#discussioncomment-10154514 I am using the preview build of Svelte Query for Svelte 5
GitHub
Svelte 5 Support · TanStack query · Discussion #7413
I'm wondering what is left to support svelte 5 and if the current approach is good. A lot of Svelte 5 apps are blocked so just trying to get a consensus of where community can help. #6981
equal-aqua
equal-aquaOP•5mo ago
Solution: wrap it on a $derived() 
let query = useGetAllProducts();
let { data: products } = $derived(query);
let query = useGetAllProducts();
let { data: products } = $derived(query);
A quick warning: 
let query = $derived(useGetAllProducts());
let query = $derived(useGetAllProducts());
This will call useGetAllProducts method infinitely
cloudy-cyan
cloudy-cyan•5mo ago
New build will be coming out soon, which may fix this!

Did you find this page helpful?