Help translating @tanstack/solid-query to SolidJS / Solid Primitives @solid-primitives/fetch

[mr-tech]

I apologize beforehand if I'm missing something obvious or just lack the experience. I'm working on porting my React app into SolidJS and it seems like I can avoid @tanstack/solid-query through native SolidJS solutions plus a little help from Solid Primitives.

I already have a working solution with solid-query as such:

import { createQuery } from '@tanstack/solid-query';

const createExampleQuery = () => createQuery(() => ({
  queryKey: ['foo', 'bar'],
  staleTime: Infinity,
  queryFn: async () => {
    const response = await fetch('https://example.com');
    if (response.status !== 200) return null;
    return await response.json();
  },
}));

Note: For simplicity, I've omitted the options that turn off automatic refetching, though I don't care about such features at the moment.

The behavior I'm looking to maintain is the ability to call the query anywhere, any number of times, and only have one request sent; then have that response cached (in memory) and accessible elsewhere in the app until invalidated. So I should be able to call createExampleQuery() twice at the top of a component and only see one network request go out (if not already cached), and then all subscribers update as usual when the request completes. Bonus points if I can invalidate the query / cache from anywhere in the app (which sounds like that's already built-in to Solid/Solid Primitives).

I've been able to figure out global caching with @solid-primitives/fetch (example below) to prevent future requests after a response is cached, but I can't seem to figure out how to get requests to dedupe.

I acknowledge that my failure here could be because I'm not experienced enough with SolidJS and have some misunderstandings about how signals work. I can think of some ways to really bruteforce the solution I want, but I assume there's some features already available to me within these frameworks that wouldn't require handling state externally. (And if I would have to do that, I'm just going to use TanStack since I'm already familiar with it.)

I read through @solid-primitives/resource's mention of TanStack Query but I couldn't figure out how to combine the APIs before I stumbled upon @solid-primitives/fetch. (As an aside, I'm confused as to the purpose / value of @solid-primitives/resource in async fetching when @solid-primitives/fetch exists.)

So to reiterate, I'm looking for how to fetch resources, dedupe outgoing http requests, and cache the responses globally. I'm having trouble with the deduping part. Any help will be greatly appreciated!

For reference, here's what I've tried so far using @solid-primitives/fetch. It seems to be caching well enough, but is not deduping requests.

import { createFetch, withCache } from '@solid-primitives/fetch';

const cache = {};
const createExampleQuery = () => createFetch(
  'https://example/com',
  {
    initialValue: null,
    responseHandler(response) {
      if (response.status !== 200) return null;
      return response.json();
    },
  },
  [withCache({ cache, expires: Infinity )], // errors if options are provided without `cache`
  // Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '{"url":"https://example.com"}')
);

PS: As to why I don't just use TanStack, I like exploring new solutions when I'm creating apps from the ground up. It's the perfect time to expand my way of thinking about problems and compare/contrast features. That's in part why I'm rewriting to SolidJS to begin with (and SolidJS gives me a special feeling as a React dev).

[atk]

Actually, createFetch is going to be deprecated in favor of the more lightweight and composite resource primitive package, which also supports invalidation.

[mr-tech]

All right. In that case, is there any built-in functionality or known patterns for deduping requests when using the resource package?

[atk]

There is makeCache.