SolidJS•15mo ago

Solid Router with useParams, createResource and two params

I've got a dynamic page with two params in the url needed by createResource to make it's data call.

const params = useParams();
 
 const [data] = createResource(params, provider.getInfo);

const params = useParams();
 
 const [data] = createResource(params, provider.getInfo);

This works for the initial request, but if I navigate to same dynamic route with different params, it won't refetch the data. I assume this is due to params being a 'store' and doesn't trigger anything unless the properties are accessed. The following does work but isn't pretty:

const params = useParams();
 // Need the reactivity and sending two params
  function paramsWrapper() {
    return {
      id: params.id,
      type: params.type
    }
  }

  const [data] = createResource(paramsWrapper, provider.getInfo);

const params = useParams();
 // Need the reactivity and sending two params
  function paramsWrapper() {
    return {
      id: params.id,
      type: params.type
    }
  }

  const [data] = createResource(paramsWrapper, provider.getInfo);

I'd like to get rid of the paramsWrapper. Any way to turn params into a signal?

2 Replies

Otonashi•15mo ago

the way you're doing it, by reading the relevant properties, is correct; you could do e.g. createResource(() => ({ ...params }), provider.getInfo) but that oversubscribes by reading every property instead (which is what would happen if you were to "turn params into a signal"), causing the resource to refetch more often than intended

chiefcllOP•15mo ago

I'll try using spread, but I thought that would be like destructing it and might not cause a read. Thanks - that does work and is a bit cleaner

Gaming

Programming

Solid Router with useParams, createResource and two params