rpivo
rpivo
PostsComments
SSolidJS
Created by rpivo on 9/16/2023 in #support
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,
    }
  );
}
1 replies
SSolidJS
Created by rpivo on 1/26/2023 in #support
styles.map.css is a route param for some reason
Hi all -- seeing this issue inside of a routeData function. 
const routeData = ({ params }) => {
  return createServerData$(
    async (id, event) => {

       ...

      }
    },
    { key: () => params.someId },
  );
};
const routeData = ({ params }) => {
  return createServerData$(
    async (id, event) => {

       ...

      }
    },
    { key: () => params.someId },
  );
};
The above routeData is working successfully in that it's running when the route is entered, and it correctly uses the someId parameter in the route. But it also is, for whatever reason, getting called with styles.map.css as the value of someId. It's as if solid-start is seeing that both of these routes get hit: - localhost:8000/somePage/123 (correct) - localhost:8000/somePage/styles.map.css (not right) Would there be any reason for that? Using: Node v19.4.0 solidjs 1.6.9 solid-start 0.2.16 vite 4.0.4
1 replies