How to make array key in resource from useRouteData reactive

I'm noticing that, if the resource that is the return value of

useRouteData

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

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

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

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

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

How to make array key in resource from useRouteData reactive

Similar Threads

How to make array key in resource from useRouteData reactive

Similar Threads

Similar Threads

Similar Threads