Zack Pitcher Posts - Answer Overflow

Zack Pitcher

•Created by Zack Pitcher on 12/8/2023 in #support

routeData params are empty but not useParams

I am using the basic <FileRoutes /> setup and I have a file located at routes/stuff/[slug].tsx. When I read params.slug from useParams, I can read it properly, but when I try to do useRouteData with an exported routeData function in the same file, the params field of args: RouteDataArgs is empty :/ Here's a minimum repro:

import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    return params;
  });
}

export default function Stuff() {
  const params = useParams();
  const routeData = useRouteData();
  return (
    <main>
      <p>{`params: ${params.slug}`}</p>
      <p>{`routeData: ${routeData.slug}`}</p>
    </main>
  );
}

import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    return params;
  });
}

export default function Stuff() {
  const params = useParams();
  const routeData = useRouteData();
  return (
    <main>
      <p>{`params: ${params.slug}`}</p>
      <p>{`routeData: ${routeData.slug}`}</p>
    </main>
  );
}

I'm sure it's something really silly, but I have tried so many different combinations of things and I can't get it to work...

10 replies

SSolidJS

•Created by Zack Pitcher on 3/2/2023 in #support

Mutating element onMount doesn't re-render

I am trying to mutate the innerText (or innerHTML) of a <div /> in an async function that I dispatch onMount(). This is in SSR mode, so maybe that's relevant here, but I did confirm that onMount is running in the browser only. 1. I tried holding a ref "refDiv", then mutating innerText, but that doesn't seem to mutate the DOM. Are refs copies or actual references to the DOM element? Is there a better way to approach this? 2. I also tried holding a signal "innerText" and setting that in the load function. That didn't work either, which confused me even more. 3. Mutating DOM directly did work, so the ref's tagName is at least correct. Here is repro code for the things I've tried:

// 1. mutating using a ref
// renders "<div></div>"
export default function RefMutation(props: any) {
  var refDiv: any
  async function load() {
    if (!refDiv) return
    refDiv.innerText = 'ref mutation'
    console.log(refDiv) // prints "<div>ref mutation</div>"
  }
  onMount(load)
  return <div ref={refDiv} />
}

// 2. setting a signal
// renders "<div></div>"
export default function SigMutation(props: any) {
  const [innerText, setInnerText] = createSignal('')
  async function load() {
    setInnerText('sig mutation')
  }
  onMount(load)
  return <div innerText={innerText()} />
}

// 3. mutating the dom directly
// renders "<div>dom mutation</div>"
export default function DomMutation(props: any) {
  var refDiv: any
  async function load() {
    const domDiv = document.getElementsByTagName(refDiv.tagName).item(0)! as HTMLElement
    domDiv.innerText = 'dom mutation'
  }
  onMount(load)
  return <div ref={refDiv} />
}

// 1. mutating using a ref
// renders "<div></div>"
export default function RefMutation(props: any) {
  var refDiv: any
  async function load() {
    if (!refDiv) return
    refDiv.innerText = 'ref mutation'
    console.log(refDiv) // prints "<div>ref mutation</div>"
  }
  onMount(load)
  return <div ref={refDiv} />
}

// 2. setting a signal
// renders "<div></div>"
export default function SigMutation(props: any) {
  const [innerText, setInnerText] = createSignal('')
  async function load() {
    setInnerText('sig mutation')
  }
  onMount(load)
  return <div innerText={innerText()} />
}

// 3. mutating the dom directly
// renders "<div>dom mutation</div>"
export default function DomMutation(props: any) {
  var refDiv: any
  async function load() {
    const domDiv = document.getElementsByTagName(refDiv.tagName).item(0)! as HTMLElement
    domDiv.innerText = 'dom mutation'
  }
  onMount(load)
  return <div ref={refDiv} />
}

12 replies

Gaming

Programming