SolidJS•9mo ago

How do you keep reactivity?

I'm trying to organize my code but I lose the reactivity on the way... When the searchParams.id value is set from undefined to a correct string value, I would expect the query to be executed and the effect to be triggered. It is not. If I uncomment the createQuery section instead of using getProgram, it works.

// ~/api/programs.ts
export function getProgram(id?: string) {
  return createQuery<Program>(() => ({
    queryKey: ["program", id],
    queryFn: async () => {
      return fetch(`http://localhost:4000/api/programs/${id}`)
        .then((res) => res.json())
        .then((data) => data.data);
    },
    enabled: !!id,
  }));
}

-------------

import { getProgram, postProgram } from "~/api/programs";

export default function Upsert() {
  const [searchParams, setSP] = useSearchParams();
  const category = getProgram(searchParams.id);
  // const category = createQuery<Program>(() => ({
  //   queryKey: ["program", searchParams.id],
  //   queryFn: async () => {
  //     return fetch(`http://localhost:4000/api/programs/${searchParams.id}`)
  //       .then((res) => res.json())
  //       .then((data) => data.data);
  //   },
  //   enabled: !!searchParams.id,
  // }));

  createEffect(() => {
    console.log(
      category,
      category.data,
      searchParams.id,
    );
  });

// ~/api/programs.ts
export function getProgram(id?: string) {
  return createQuery<Program>(() => ({
    queryKey: ["program", id],
    queryFn: async () => {
      return fetch(`http://localhost:4000/api/programs/${id}`)
        .then((res) => res.json())
        .then((data) => data.data);
    },
    enabled: !!id,
  }));
}

-------------

import { getProgram, postProgram } from "~/api/programs";

export default function Upsert() {
  const [searchParams, setSP] = useSearchParams();
  const category = getProgram(searchParams.id);
  // const category = createQuery<Program>(() => ({
  //   queryKey: ["program", searchParams.id],
  //   queryFn: async () => {
  //     return fetch(`http://localhost:4000/api/programs/${searchParams.id}`)
  //       .then((res) => res.json())
  //       .then((data) => data.data);
  //   },
  //   enabled: !!searchParams.id,
  // }));

  createEffect(() => {
    console.log(
      category,
      category.data,
      searchParams.id,
    );
  });

6 Replies

Brendonovich•9mo ago

make getProgram take an Accessor<string | undefined> rather than just a ?string that way the searchParams store is read inside the createQuery args rather than in the component body (which only runs once)

binajmenOP•9mo ago

hhm

Brendonovich•9mo ago

the commented out version you have works because searchParams is being read inside the createQuery arg

binajmenOP•9mo ago

Argument of type 'string | undefined' is not assignable to parameter of type 'Accessor<string | undefined>'. Type 'undefined' is not assignable to type 'Accessor<string | undefined>'.

Brendonovich•9mo ago

you'll need to pass an accessor to getProgram too like () => searchParams.id

binajmenOP•9mo ago

are you suggestint to pass the searchParams instead of searchParams.id? I see\ yup working still not used to these "tricks", thank you

Gaming

Programming

How do you keep reactivity?