SolidJS•15mo ago

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

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,
    }
  );
}

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,
    }
  );
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to make array key in resource from useRouteData reactive