SolidJS•16mo 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

Brendonovich•8/29/24, 3:27 AM

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

AngelelzOP•8/29/24, 11:36 AM

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

AAngelelz I need to investigate a little more, but getting rid of `getRequestEvent` and `c...

Brendonovich•8/29/24, 11:53 AM

Oh is getJWTUser a cache function?

Brendonovich•8/29/24, 11:53 AM

Move the resource inside the root

BBrendonovich Oh is getJWTUser a cache function?

AngelelzOP•8/29/24, 11:54 AM

Yep, that was the problem I guess

AngelelzOP•8/29/24, 11:55 AM

So the cache function caches per request right?

Brendonovich•8/29/24, 11:55 AM

On the server yeah

AngelelzOP•8/29/24, 11:56 AM

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

AngelelzOP•8/29/24, 11:56 AM

Or do I?

Brendonovich•8/29/24, 11:57 AM

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

AngelelzOP•8/29/24, 11:57 AM

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•8/29/24, 11:58 AM

Yeah sure

AngelelzOP•8/29/24, 11:58 AM

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

AngelelzOP•8/29/24, 11:59 AM

I haven't been able to find something similar in solid

AngelelzOP•8/29/24, 11:59 AM

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?

AngelelzOP•8/29/24, 12:00 PM

I would prefer to have server functions that don't turn into endpoints, is that possible in solid?

Brendonovich•8/29/24, 12:06 PM

Solid doesn't have async components and probably never will, server components though are in development.
Yeah each

use server

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•8/29/24, 12:16 PM

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

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•8/29/24, 12:17 PM

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

AngelelzOP•8/29/24, 12:18 PM

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

AngelelzOP•8/29/24, 12:18 PM

Is*

Brendonovich•8/29/24, 12:18 PM

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

AngelelzOP•8/29/24, 12:18 PM

Isn't ssr enabled by default?

Brendonovich•8/29/24, 12:18 PM

Yeah

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

Brendonovich•8/29/24, 12:19 PM

That component won't have an endpoint created, only the

use server

use server

function for . I'm confused why you don't want endpoints being created?

Brendonovich•8/29/24, 12:20 PM

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

BBrendonovich That component won't have an endpoint created, only the `use server` function fo...

AngelelzOP•8/29/24, 12:21 PM

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

Brendonovich•8/29/24, 12:21 PM

If only came on the page after a navigation, for example, it needs the endpoint to exist so the resource can fetch on the client

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

Brendonovich•8/29/24, 12:22 PM

As opposed to Next where every layout and page is an endpoint?

AngelelzOP•8/29/24, 12:26 PM

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•8/29/24, 12:26 PM

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

AngelelzOP•8/29/24, 12:27 PM

What would you recommend if we have used this pattern all over our project?

BBrendonovich Sidenote - don't destructure props like you're used to with react, things will s...

AngelelzOP•8/29/24, 12:30 PM

I see your point, I destructured the id in the parameter

Brendonovich•8/29/24, 12:33 PM

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•8/29/24, 12:40 PM

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?

AngelelzOP•8/29/24, 12:43 PM

Do we know to what endpoint a server function get converted to?

AAngelelz So you're saying that if the page is protected from the middleware, the server f...

Brendonovich•8/29/24, 1:37 PM

If you use middleware then yes, they run before everything else on the server

AAngelelz Do we know to what endpoint a server function get converted to?

Brendonovich•8/29/24, 1:38 PM

It all depends on the location of the function, you can’t know the exact endpoint without building

AngelelzOP•8/29/24, 1:38 PM

I'm reading about locals, I really missed something like this when we started using nextjs

AngelelzOP•8/29/24, 1:39 PM

If the middleware can be async that will solve all my problems

Brendonovich•8/29/24, 1:40 PM

Yeah middleware can be async

AngelelzOP•8/29/24, 1:44 PM

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.

AngelelzOP•8/29/24, 1:44 PM

Thank you for the help and patience!