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

NNuxt

•Created by jdgamble555 on 4/8/2024 in #❓・help

Client inside Server Component

Is it possible to put a client component inside a server component? I can't get this to work. I also tried with experimental.componentIslands.selectiveClient and using nuxt-client. Any examples of this, or does it not work. Thanks J

4 replies

CDCloudflare Developers

•Created by jdgamble555 on 3/14/2023 in #workers-help

Connect to Redis on Cloudflare Workers

I'm getting this error when trying to connect to a simple redis instance:

"TypeError: Class extends value undefined is not a constructor or null\n    at node_modules/@redis/client/dist/lib/client/socket.js (bundledWorker-0.5853845851870065.mjs:53957:46)\n    at __require (bundledWorker-0.5853845851870065.mjs:37:51)\n    at node_modules/@redis/client/dist/lib/client/index.js (bundledWorker-0.5853845851870065.mjs:57012:20)\n    at __require (bundledWorker-0.5853845851870065.mjs:37:51)\n    at node_modules/@redis/client/dist/index.js (bundledWorker-0.5853845851870065.mjs:58651:20)\n    at __require (bundledWorker-0.5853845851870065.mjs:37:51)\n    at node_modules/redis/dist/index.js (bundledWorker-0.5853845851870065.mjs:62787:20)\n    at __require (bundledWorker-0.5853845851870065.mjs:37:51)\n    at .svelte-kit/output/server/entries/endpoints/graphql/_server.ts.js (bundledWorker-0.5853845851870065.mjs:64226:28)\n    at __init (bundledWorker-0.5853845851870065.mjs:34:56)"

"TypeError: Class extends value undefined is not a constructor or null\n    at node_modules/@redis/client/dist/lib/client/socket.js (bundledWorker-0.5853845851870065.mjs:53957:46)\n    at __require (bundledWorker-0.5853845851870065.mjs:37:51)\n    at node_modules/@redis/client/dist/lib/client/index.js (bundledWorker-0.5853845851870065.mjs:57012:20)\n    at __require (bundledWorker-0.5853845851870065.mjs:37:51)\n    at node_modules/@redis/client/dist/index.js (bundledWorker-0.5853845851870065.mjs:58651:20)\n    at __require (bundledWorker-0.5853845851870065.mjs:37:51)\n    at node_modules/redis/dist/index.js (bundledWorker-0.5853845851870065.mjs:62787:20)\n    at __require (bundledWorker-0.5853845851870065.mjs:37:51)\n    at .svelte-kit/output/server/entries/endpoints/graphql/_server.ts.js (bundledWorker-0.5853845851870065.mjs:64226:28)\n    at __init (bundledWorker-0.5853845851870065.mjs:34:56)"

How can I simply connect to Redis on my Cloudflare instance? My code is simple: https://github.com/jdgamble555/redisgraph-graphql-sveltekit/blob/master/src/lib/server/redis.ts How can I get this to work? J

5 replies

CDCloudflare Developers

•Created by jdgamble555 on 1/23/2023 in #workers-help

SvelteKit Deployment Not Working

I was able to deploy my SvelteKit Test App fine when I used the Wrangler CLI. https://cloudflare-svelte.jdgamble555.workers.dev/ https://github.com/jdgamble555/cloudflare-svelte However, I want to tie my deployments to GitHub Actions instead of using Wrangler. I deployed the exact same app in the dashboard under Pages --> Create Project --> Connect to Git (selecting my project with the SvelteKit Template) and I get the following error:

16:28:07.802    (node:1279) ExperimentalWarning: The ESM module loader is experimental.
16:28:07.810    file:///opt/buildhome/repo/node_modules/@sveltejs/kit/postinstall.js:8
16:28:07.810        const cwd = process.env.INIT_CWD ?? process.cwd();
16:28:07.810                                          ^
16:28:07.810    
16:28:07.810    SyntaxError: Unexpected token '?'
16:28:07.811        at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
16:28:07.811        at async link (internal/modules/esm/module_job.js:37:21)

16:28:07.802    (node:1279) ExperimentalWarning: The ESM module loader is experimental.
16:28:07.810    file:///opt/buildhome/repo/node_modules/@sveltejs/kit/postinstall.js:8
16:28:07.810        const cwd = process.env.INIT_CWD ?? process.cwd();
16:28:07.810                                          ^
16:28:07.810    
16:28:07.810    SyntaxError: Unexpected token '?'
16:28:07.811        at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
16:28:07.811        at async link (internal/modules/esm/module_job.js:37:21)

How can I get this to work through GitHub actions? J

11 replies

Gaming

Programming