SolidJS•3mo ago

useLocation and useNavigate in the layout?

I'm getting this stupid "<A> and 'use' router primitives can be only used inside a Route." error when I use those primitives in the Layout. This is my app.tsx:

export default function App() {
  const event = getRequestEvent();
  const [user, lll] = createResource(() => getJWTUser());
  return (
    <Router
      root={(props) => (
        <Suspense>
          <MainNav>{props.children}</MainNav>
          <ModalAndToast />
        </Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

export default function App() {
  const event = getRequestEvent();
  const [user, lll] = createResource(() => getJWTUser());
  return (
    <Router
      root={(props) => (
        <Suspense>
          <MainNav>{props.children}</MainNav>
          <ModalAndToast />
        </Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

And I'm using the A component and useNavigate inside MainNav. Is that not the solid way? What is the solid way? Thanks

28 Replies

Brendonovich•3mo ago

Using them inside MainNav should be fine, just make sure you’re not destructuring any props, as that can break context

AngelelzOP•3mo ago

I need to investigate a little more, but getting rid of getRequestEvent and createResource seem to have fixed the issue.

Brendonovich•3mo ago

Oh is getJWTUser a cache function? Move the resource inside the root

AngelelzOP•3mo ago

Yep, that was the problem I guess So the cache function caches per request right?

Brendonovich•3mo ago

On the server yeah

AngelelzOP•3mo ago

I don't think I need it because I'm just reading from cookies Or do I?

Brendonovich•3mo ago

If you don’t want to deduplicate calls to that function then nah

AngelelzOP•3mo ago

Do you mind if I ask a couple other questions about solid start. I'm starting to migrate an internal tool from nextjs to solid due to performance in the client

Brendonovich•3mo ago

Yeah sure

AngelelzOP•3mo ago

So, we extensively used async components to make server request to database and services in the server and send a fully rendered page to the client I haven't been able to find something similar in solid Seems like you create the resource with a "use client" function, that only runs on the server but seems to always be converted to an endpoint. Am I correct? I would prefer to have server functions that don't turn into endpoints, is that possible in solid?

Brendonovich•3mo ago

Solid doesn't have async components and probably never will, server components though are in development. Yeah each use server function becomes an endpoint, but i'm not sure what the alternative you're looking for is? For the client to re-execute a server function it has to be available as an endpoint

AngelelzOP•3mo ago

I'll give you an example. I would like to send this button, fully rendered to the client:

export default function UserDropdownButton({ id }: { id: string }) {
  const [user] = createResource(() => getJWTUserById(id));

  return (
    <Show when={(user.state = "ready")}>
      <Button variant="ghost" class="text-lg font-bold">
        {user().name}
      </Button>
    </Show>
  );
}

export default function UserDropdownButton({ id }: { id: string }) {
  const [user] = createResource(() => getJWTUserById(id));

  return (
    <Show when={(user.state = "ready")}>
      <Button variant="ghost" class="text-lg font-bold">
        {user().name}
      </Button>
    </Show>
  );
}

Is there a way to do this in Solid? When I know this data will never change as long as the user is logged in.

Brendonovich•3mo ago

If you've got ssr enabled then it should do that

AngelelzOP•3mo ago

If there a way to prevent it from creating an endpoint? Is*

Brendonovich•3mo ago

Sidenote - don't destructure props like you're used to with react, things will start breaking out of nowhere 😅

AngelelzOP•3mo ago

Isn't ssr enabled by default?

Brendonovich•3mo ago

Yeah That component won't have an endpoint created, only the use server function for getJWTUserById. I'm confused why you don't want endpoints being created? Something to note is that Start is a very client-first framework. SSR only happens on initial page load, everything after that happens on the client

AngelelzOP•3mo ago

If we allow that, then we'll have to worry about security, middlewares and such

Brendonovich•3mo ago

If UserDropdownButton only came on the page after a navigation, for example, it needs the getJWTUserById endpoint to exist so the resource can fetch on the client As opposed to Next where every layout and page is an endpoint?

AngelelzOP•3mo ago

Please note that I'm not attacking solid. I'm just trying to migrate and this are the hurdles we're finding. for me, it's easy to protect routes in next using the middleware. When the layout or page gets called, the middleware already checked that the user is logged in. So I can confidently call server functions inside the async page

Brendonovich•3mo ago

Oh ik you're not attacking it, i'm geniunely confused where the disconnect is

AngelelzOP•3mo ago

What would you recommend if we have used this pattern all over our project? I see your point, I destructured the id in the parameter

Brendonovich•3mo ago

The idea with server functions is that you protect them in the same way as you would with a server component in Next, so that no matter if the function is called directly on the server or over the network on the client you get the same protection. You can also do this in middleware but I wouldn't recommend it

AngelelzOP•3mo ago

So you're saying that if the page is protected from the middleware, the server functions that I use for it's data will be protected as well? Do we know to what endpoint a server function get converted to?

Brendonovich•3mo ago

If you use middleware then yes, they run before everything else on the server It all depends on the location of the function, you can’t know the exact endpoint without building

AngelelzOP•3mo ago

I'm reading about locals, I really missed something like this when we started using nextjs If the middleware can be async that will solve all my problems

Brendonovich•3mo ago

Yeah middleware can be async

AngelelzOP•3mo ago

This will solve my issues. I can inject the data I need in locals when the request hits the middleware. Since I can do async calls, I can do whatever I want. Thank you for the help and patience!

Gaming

Programming

useLocation and useNavigate in the layout?