jdgamble555 Posts - Answer Overflow

jdgamble555

Explore posts from servers

•Created by jdgamble555 on 4/29/2024 in #support

When to use createEffect

I have a signal that depends on another signal. My todos signal is depended on my user signal. When there is a user, I want to subscribe to the todos collection, and when there isn't I want to unsubscribe. When there is again (login), I want to resubscribe (user could change too). Should I use createEffect for this? I thought you shouldn't set a signal inside a signal though? Here is my code:

export function useTodos() {

    const _user = useUser();

    const _store = createStore<{
        todos: TodoItem[],
        loading: boolean
    }>({
        todos: [],
        loading: true
    });

    const user = _user[0];

    const setTodos = _store[1];

    setTodos(v => ({ ...v, loading: true }));

    if (!user.data) {
        setTodos({ loading: false, todos: [] });
        return _store[0];
    }

    const unusbscribe = onSnapshot(

        // query realtime todo list
        query(
            collection(db, 'todos'),
            where('uid', '==', user.data.uid),
            orderBy('created')
        ), (q) => {

            // get data, map to todo type
            const data = snapToData(q);

            /**
             * Note: Will get triggered 2x on add 
             * 1 - for optimistic update
             * 2 - update real date from server date
             */

            // print data in dev mode
            if (process.env.NODE_ENV === 'development') {
                console.log(data);
            }

            // add to store
            setTodos({ loading: false, todos: data });

        });

    onCleanup(unusbscribe);

    return _store[0];
};

export function useTodos() {

    const _user = useUser();

    const _store = createStore<{
        todos: TodoItem[],
        loading: boolean
    }>({
        todos: [],
        loading: true
    });

    const user = _user[0];

    const setTodos = _store[1];

    setTodos(v => ({ ...v, loading: true }));

    if (!user.data) {
        setTodos({ loading: false, todos: [] });
        return _store[0];
    }

    const unusbscribe = onSnapshot(

        // query realtime todo list
        query(
            collection(db, 'todos'),
            where('uid', '==', user.data.uid),
            orderBy('created')
        ), (q) => {

            // get data, map to todo type
            const data = snapToData(q);

            /**
             * Note: Will get triggered 2x on add 
             * 1 - for optimistic update
             * 2 - update real date from server date
             */

            // print data in dev mode
            if (process.env.NODE_ENV === 'development') {
                console.log(data);
            }

            // add to store
            setTodos({ loading: false, todos: data });

        });

    onCleanup(unusbscribe);

    return _store[0];
};

Thanks, J

6 replies

SSolidJS

•Created by jdgamble555 on 4/27/2024 in #support

Preloading Data with 'use server'

I'm following the limited documentation, and I want to preload data from the server for a route:

import { Title } from "@solidjs/meta";
import { RouteDefinition, cache, createAsync } from "@solidjs/router";
import { getAbout } from "~/lib/about";

const getAboutPage = cache(async () => {
  'use server';
  return await getAbout();
}, 'about');

export const route = {
  load: () => getAboutPage(),
} satisfies RouteDefinition;

export default function About() {

  const about = createAsync(() => getAboutPage());

  return about() && (
    <>
      <Title>About</Title>
      <div class="flex items-center justify-center my-5">
        <div class="border w-[400px] p-5 flex flex-col gap-3">
          <h1 class="text-3xl font-semibold">{about()!.name}</h1>
          <p>{about()!.description}</p>
        </div>
      </div>
    </>
  );
};

import { Title } from "@solidjs/meta";
import { RouteDefinition, cache, createAsync } from "@solidjs/router";
import { getAbout } from "~/lib/about";

const getAboutPage = cache(async () => {
  'use server';
  return await getAbout();
}, 'about');

export const route = {
  load: () => getAboutPage(),
} satisfies RouteDefinition;

export default function About() {

  const about = createAsync(() => getAboutPage());

  return about() && (
    <>
      <Title>About</Title>
      <div class="flex items-center justify-center my-5">
        <div class="border w-[400px] p-5 flex flex-col gap-3">
          <h1 class="text-3xl font-semibold">{about()!.name}</h1>
          <p>{about()!.description}</p>
        </div>
      </div>
    </>
  );
};

I am preloading some data from a database. I'm not sure why the createAsync has an option for undefined, but I do about() as the docs suggest. However, the data does not display properly UNLESS I do full referesh. It does not stay when navigating back to the page. I only want to fetch it once, I just don't every want a blank page. You can see the example (without logging in) : https://solid-start-firebase.vercel.app/ How do I fix this? J

15 replies

Gaming

Programming