T
TanStack•2y ago
noble-gold

Ability to disable suspense for certain queries

I only want <Suspense> to only be triggered on certain queries, is there no way to do this? The suspense property in query options seems to be ignored and from what I can tell in the source code, nothing actually reads that property.
5 Replies
ratty-blush
ratty-blush•2y ago
You van useSuspenseQuery for suspense and useQuery for non-suspense
noble-gold
noble-goldOP•2y ago
this is with useQuery, useSuspenseQuery doesn't exist on the Solid.js adapter as I recall? ...yeah there's no useSuspenseQuery
ratty-blush
ratty-blush•2y ago
sorry, I completely missed that this is about solid, my bad @Aryan recently said this: Suspense option in solid is redundant. If you read query.data inside JSX, We automatically throw the pending states to the Suspense boundary. 
const RecommendedPicks = () => {
  const params = useParams();

  const picks = createQuery(() => ({
    queryKey: ["recommended", params.id],
    queryFn: async () => {
      const res = await fetch(`${API_URL}/products/recommended/${params.id}`);
      return res.json() as Promise<RecommendedPick[]>;
    },
  }));

  return (
    <Suspense fallback={<PlaceholderPicks />}>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 h-max">
        <For each={picks.data}>{(pick) => <Pick pick={pick} />}</For>
      </div>
    </Suspense>
  );
};
const RecommendedPicks = () => {
  const params = useParams();

  const picks = createQuery(() => ({
    queryKey: ["recommended", params.id],
    queryFn: async () => {
      const res = await fetch(`${API_URL}/products/recommended/${params.id}`);
      return res.json() as Promise<RecommendedPick[]>;
    },
  }));

  return (
    <Suspense fallback={<PlaceholderPicks />}>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 h-max">
        <For each={picks.data}>{(pick) => <Pick pick={pick} />}</For>
      </div>
    </Suspense>
  );
};
not sure if there is a way to disable that behaviour
noble-gold
noble-goldOP•2y ago
yeahh... the behavior is what I'd like to disable, at least for Solid.js' own createResource it's possible to do that by (annoyingly) adding a check before accessing the data, but from the looks of it the Tanstack adapter is going to hit the suspend for every property of the query state that I access
vicious-gold
vicious-gold•2y ago
https://github.com/TanStack/query/pull/6415 I made a PR for this exactly. It seems they want to phase out the suspense option from the query options so I proposed using .latest, like you can in a normal solid resource. Still waiting for thoughts from @Aryan to see if that API makes sense.
GitHub
fix(solid-query): respect suspense: false by aadito123 · Pull Reque...
As of now, the default in solid-query is to suspend when accessing inside a suspense boundary. This may not always be ideal, hence the suspense option is provided. However, that option was not resp...

Did you find this page helpful?