SolidJSS
SolidJS•3y ago
rpivo

How to make array key in resource from useRouteData reactive

I'm noticing that, if the resource that is the return value of useRouteData is an object, then its keys will mostly be reactive -- but if the key has an array as its value, that key will not be reactive
Example:
const data  useRouteData();
data().name // reactive
data().groceryList[0] // not reactive


If I just stringify this value on the server and then parse it on the client, then that works just fine, but I'm wondering if there is any way to make it reactive?

The associated routeData looks like this

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(
    async (key): Promise<PersonData> => {
      let tries = 0;

      try {
        const d = await fetch(`http://localhost:4000/people/us/${key}`);
        return await d.json();
      } catch (e) {
        console.error(e);
      }
    },
    {
      key: () => params.person,
    }
  );
}
Was this page helpful?