Xzayler
Xzayler
Explore posts from servers
CDCloudflare DevelopersSSolidJS
PostsComments
SSolidJS
Created by Xzayler on 8/21/2024 in #support
Solidstart and websockets
Basically I'm trying to get this to work. https://github.com/peerreynders/solid-start-ws-demo/ It works in dev environment but if I pnpm run build and pnpm run start the websocket connections just instantly close right after opening. I'm not able to get any clues about the issue so I'm wondering if it's anything to do with start or Nitro or Vinxi. Any clues?
1 replies
SSolidJS
Created by Xzayler on 8/3/2024 in #support
Deploying solidstart problems
TBF I probably have 2 separate problems. I'm trying to deploy a start project on vercel, all I get after a successful build is a 404 NOT_FOUND error, when visiting my page. This is my first issue and I'm getting no clues as to what could be wrong. When building locally, in order to test it out, I can't try out my build because the data in my .env file, which works in dev mode, doesn't seem to be included in the build, so the whole app crashes as the server tries to use an env variable that doesn't exist. I can't identify why this would happens as my file is simply name .env so it should be included every time. I have not touched the app.config.ts file besides for adding middleware. What am I doing wrong?
5 replies
SSolidJS
Created by Xzayler on 7/6/2024 in #support
Mutating a resource
The usecase is that I have comments on a post, and when a new comment is made, I want it to instantly appear on the page without requiring back-end confirmation. My page is set up ina way where I get a post from the server which has a children field which is array of comments. I create a copy of the post object, add the new comment to its children field, and then pass the whole thing to mutate as an arg. However it seems that mutating isn't reactive. The resource value does change (I can test it by console logging) but it doesn't change anything on the page. I have a function like 
// inside a component:
const [post, {mutate, refetch}] = createResource(...)

function addCommment(comment: string) {
  const p = ...
  ...
  mutate(p)
}

return
  <For each={post() ? post()!.children : []}>
    {(item) => <Comment comment={item}/>}
  </For>
// inside a component:
const [post, {mutate, refetch}] = createResource(...)

function addCommment(comment: string) {
  const p = ...
  ...
  mutate(p)
}

return
  <For each={post() ? post()!.children : []}>
    {(item) => <Comment comment={item}/>}
  </For>
It works until first render but when calling the addComment function in another component, the data isn't updated in te html, but it is mutated when I call post() again, like with a console.log.
4 replies
SSolidJS
Created by Xzayler on 6/25/2024 in #support
Redirect troubles
It's the classic use-case where I want a page to redirect if a user isn't logged in. 
// lib/server.ts
export const getCurrentUser = cache(async (): Promise<User> => {
  const event = await getRequestEvent();
  if (!event || !event.locals.session || !event.locals.user) {
    console.log("should redirect");
    throw redirect("/login"); // also tried with return
  }
  return event.locals.user;
}, "curruser");
// lib/server.ts
export const getCurrentUser = cache(async (): Promise<User> => {
  const event = await getRequestEvent();
  if (!event || !event.locals.session || !event.locals.user) {
    console.log("should redirect");
    throw redirect("/login"); // also tried with return
  }
  return event.locals.user;
}, "curruser");
export default function Page() {
  const user = createAsync(async () => { // also tried with createResource()
    return await getCurrentUser();
  });
export default function Page() {
  const user = createAsync(async () => { // also tried with createResource()
    return await getCurrentUser();
  });
For some reason this doesn't work at all. The page will continue loading and error out because of trying to access properties of undefined. It used to work a long while ago when I created this, and I have no idea when it broke. As far as I can tell, this should work according to docs too. So why is there no redirection happening?
9 replies
SSolidJS
Created by Xzayler on 4/15/2024 in #support
Dynamically rendering components
My objective in a nutshell is making a small user card appear on an element hover, like on twitter. The way I'm making it is the following: This is a barebones representation 
// UserPopup.tsx
export default function UserPopup(props: { userHandle: string }) {
  const [user] = createResource(() => {
    return getUserSummary(props.userHandle);
  });
  // addFollow is a server function doing db stuff
  const follow = useAction(action(addFollow));

  return (
    <Show when={user()} fallback={<div>Loading...</div>}>
      <div>user()!.name</div>
      <button onClick={() => follow(user()!.id)}>
    </Show>
  )}
// UserPopup.tsx
export default function UserPopup(props: { userHandle: string }) {
  const [user] = createResource(() => {
    return getUserSummary(props.userHandle);
  });
  // addFollow is a server function doing db stuff
  const follow = useAction(action(addFollow));

  return (
    <Show when={user()} fallback={<div>Loading...</div>}>
      <div>user()!.name</div>
      <button onClick={() => follow(user()!.id)}>
    </Show>
  )}
And then I have a wrapper for this popup 
// UserWrapper.tsx

export default function UserWrapper(props) {
  const [element, setElement] = createSignal<JSX.Element>(null);

  const activate = (handle: string) => {
    setElement(() => UserPopup({ userHandle: handle }));
  };

  const deactivate = () => {
    setElement(null);
  };
  
  return (
    // Additional stuff calling activate onMouseEnter and deactivate onMouseLeave
    <div>{element()}</div>
  )}
// UserWrapper.tsx

export default function UserWrapper(props) {
  const [element, setElement] = createSignal<JSX.Element>(null);

  const activate = (handle: string) => {
    setElement(() => UserPopup({ userHandle: handle }));
  };

  const deactivate = () => {
    setElement(null);
  };
  
  return (
    // Additional stuff calling activate onMouseEnter and deactivate onMouseLeave
    <div>{element()}</div>
  )}
With this method I get the error: 'use' router primitives can be only used inside a Route. which I guess is because I'm trying to create UserPopup just in the air without a parent, but I'm not sure how I should be creating UserPopup within a context, or do I just have to not use useAction and find something else? The other problem with this is I'm getting the warnings computations created outside a createRoot or render will never be disposed. So I tried using both render and mount and attach the UserPopup element I create directly to the element I want it to go in but nothing happened, this was my attempt:
// UserWrapper
let tooltipbox;

const activate = (handle: string) => {
  const dispose = render(
    () => <UserPopup userHandle={props.handle}>,
      tooltipbox! as HTMLDivElement
  );
};
...
...
return <div ref={tooltipbox}></div>
// UserWrapper
let tooltipbox;

const activate = (handle: string) => {
  const dispose = render(
    () => <UserPopup userHandle={props.handle}>,
      tooltipbox! as HTMLDivElement
  );
};
...
...
return <div ref={tooltipbox}></div>
So what is the right way to do this?
22 replies
SSolidJS
Created by Xzayler on 3/28/2024 in #support
Navigating with A from and to dynamic route doesn't re-render.
I have a dynamic route routes/post/[postid].tsx. Within this route I have (simplified) 
const [post, {mutate, refetch}] = createResource(() => {
    return getPost(params.postid);
  });
// I also tried running refetch() here
return 
  <A href={`/post/${item.id}`}>
    // more jsx...
  </A>
const [post, {mutate, refetch}] = createResource(() => {
    return getPost(params.postid);
  });
// I also tried running refetch() here
return 
  <A href={`/post/${item.id}`}>
    // more jsx...
  </A>
In dev, when I click on this a tag, the url updates in my browser but the dom doesn't, unless I force a reload. I'm guessing post doesn't refetch or something. Do I need to force a refetch somehow or am I navigating wrong?
46 replies