Leal
Leal
PostsComments
SSolidJS
Created by Leal on 1/7/2025 in #support
Complex createResource management
I'll close this thread
14 replies
SSolidJS
Created by Leal on 1/7/2025 in #support
Complex createResource management
Thank you very much for your help and time
14 replies
SSolidJS
Created by Leal on 1/7/2025 in #support
Complex createResource management
All integrations that I made were made by sending the user sessionId through the WS protocol header, so there was no actual interaction with the SolidStart server
14 replies
SSolidJS
Created by Leal on 1/7/2025 in #support
Complex createResource management
I'll take this chance to learn the SSE thing, i think it can actually solve my problem in a nicer way
14 replies
SSolidJS
Created by Leal on 1/7/2025 in #support
Complex createResource management
Well, the following code still runs only once, in the server or in the client and the data is still transferred to the client if rendered by the server 
import { createAsync, query } from '@solidjs/router';
import { isServer } from 'solid-js/web';
import { fetchTestClient } from './use-test.client';
import { fetchTestServer } from './use-test.server';

const TEST_RESOURCE_KEY = 'test';

const fetchTest = isServer
  ? fetchTestSSR
  : fetchTestCSR;

const testQuery = query(
  fetchTest,
  TEST_RESOURCE_KEY
);

export const useTest = () =>
  createAsync(() => testQuery(), { deferStream: isServer });
import { createAsync, query } from '@solidjs/router';
import { isServer } from 'solid-js/web';
import { fetchTestClient } from './use-test.client';
import { fetchTestServer } from './use-test.server';

const TEST_RESOURCE_KEY = 'test';

const fetchTest = isServer
  ? fetchTestSSR
  : fetchTestCSR;

const testQuery = query(
  fetchTest,
  TEST_RESOURCE_KEY
);

export const useTest = () =>
  createAsync(() => testQuery(), { deferStream: isServer });
I'll probably have to refactor half the project to remove the WebSocket, which although is experimental, was actually working fine and move to SSE. I'll probably have to think in a new solution to the problem Thank you very much for your help (again :P)!
14 replies
SSolidJS
Created by Leal on 1/7/2025 in #support
Complex createResource management
Or disable its hydration
14 replies
SSolidJS
Created by Leal on 1/7/2025 in #support
Complex createResource management
But out of the scope of websockets, is it possible to make the resource fetch once in the server AND fetch once in the client?
14 replies
SSolidJS
Created by Leal on 1/7/2025 in #support
Complex createResource management
Oh, SSE is something new to me! I'm going to take a look right now!
14 replies
SSolidJS
Created by Leal on 1/5/2025 in #support
Unable to provide context to children
Thank you very much for your help!
13 replies
SSolidJS
Created by Leal on 1/5/2025 in #support
Unable to provide context to children
Oh, I see where this can cause some problems
13 replies
SSolidJS
Created by Leal on 1/5/2025 in #support
Unable to provide context to children
I don't really know when to properly use the children fn, and I don't really remember where I've read that it was a good practice to use it on every component and please, if this is a wrong statement I would love to understand when it's a good thing to use it Just for the sake of documentation, here's the fixed snippet: 
type DropdownCtx = {
  rootElement: Accessor<HTMLDivElement>;
  setValue: Setter<any>;
  setSelected: Setter<HTMLElement | undefined>;
};

const DropdownContext = createContext<DropdownCtx>();

export const DropdownComponent = <T extends any>(props: DropdownProps<T>) => {
  let rootElement!: HTMLDivElement;
  const rootElementAccessor = () => rootElement;

  const [value, setValue] = createSignal(props.value);
  const [selected, setSelected] = createSignal<HTMLElement | undefined>(undefined);

  // ...

  const context: DropdownCtx = {
    rootElement: rootElementAccessor,
    setValue,
    setSelected,
  };

  // ...

  return (
    // ...
    <dialog
      class='dropdown__popup'
      id={idPopup()}
      open={isOpen()}
    >
      <DropdownContext.Provider value={context}>
        {props.children}
      </DropdownContext.Provider>
    </dialog>
  );
};


export const DropdownItemComponent = <T extends any>(props: DropdownItemProps<T>) => {
  // ...

  const context = useContext(DropdownContext);

  if (!context) {
    throw new Error("Missing context");
  }

  // ...
};

// Usage

<DropdownComponent>
  <DropdownItemComponent>
    <span>help :(</span>
  </DropdownItemComponent>
</DropdownComponent>
type DropdownCtx = {
  rootElement: Accessor<HTMLDivElement>;
  setValue: Setter<any>;
  setSelected: Setter<HTMLElement | undefined>;
};

const DropdownContext = createContext<DropdownCtx>();

export const DropdownComponent = <T extends any>(props: DropdownProps<T>) => {
  let rootElement!: HTMLDivElement;
  const rootElementAccessor = () => rootElement;

  const [value, setValue] = createSignal(props.value);
  const [selected, setSelected] = createSignal<HTMLElement | undefined>(undefined);

  // ...

  const context: DropdownCtx = {
    rootElement: rootElementAccessor,
    setValue,
    setSelected,
  };

  // ...

  return (
    // ...
    <dialog
      class='dropdown__popup'
      id={idPopup()}
      open={isOpen()}
    >
      <DropdownContext.Provider value={context}>
        {props.children}
      </DropdownContext.Provider>
    </dialog>
  );
};


export const DropdownItemComponent = <T extends any>(props: DropdownItemProps<T>) => {
  // ...

  const context = useContext(DropdownContext);

  if (!context) {
    throw new Error("Missing context");
  }

  // ...
};

// Usage

<DropdownComponent>
  <DropdownItemComponent>
    <span>help :(</span>
  </DropdownItemComponent>
</DropdownComponent>
Thank you guys for your help!
13 replies
SSolidJS
Created by Leal on 1/5/2025 in #support
Unable to provide context to children
Thank you guys for answering and sorry for my delay, had to clean the house followed by a power drop 🥲 Answering your messages, in order: - Are those snippets in the same module? Yes, const DropdownContext = createContext<DropdownCtx>(); and both components are in the same module, only the usage part is outside the module. - Context as a module global isn't good enough if it is used during SSR... I couldn't really find examples on context for SolidStart projets, I'll be adjusting the code according to your description and make some tests, but if it's really necessary to declare context as locals for each request, then I don't really understood it's objective. The way I understood context was like an Angular component providing some value that is accessible in it's children, therefore the declaration of the context would just be some kind of identifier to the resource but I might be really wrong here. - You may force props.children to be evaluated before the Context is ready I have tried using props.children instead of the children fn from solid, it had the same result - So I'd start by isolating the provider and hook into their own module... I'll be doing that - The problem here is that the children are created early... children() is only used in the snippet provided, and as I said, I have tried using props.children directly - I suspect there may well be something else be going on in code that we aren't seeing … I'll take the business logic out of the component and provide you guys the hole file ------ As I was writing this answer, based on your suggestions, I was able to fix the problem. It's really a children fn problem. When I tried using props.children I still had the children fn declaration at the beginning of the component and by removing that the problem was fixed!
13 replies