How do you keep reactivity?

I'm trying to organize my code but I lose the reactivity on the way...

When the

searchParams.id

searchParams.id

searchParams.id

searchParams.id value is set from

undefined

undefined

to a correct

string

string

value, I would expect the query to be executed and the effect to be triggered. It is not.

If I uncomment the

createQuery

createQuery

createQuery

createQuery section instead of using

getProgram

getProgram

getProgram

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,
    );
  });

// ~/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,
    );
  });

Brendonovich•4/17/24, 4:35 PM

make

getProgram

getProgram

take an Accessor<string | undefined>Accessor<string | undefined> rather than just a ?string?string

Brendonovich•4/17/24, 4:36 PM

that way the searchParamssearchParams store is read inside the

createQuery

createQuery

args rather than in the component body (which only runs once)

binajmenOP•4/17/24, 4:36 PM

hhm

Brendonovich•4/17/24, 4:37 PM

the commented out version you have works because searchParamssearchParams is being read inside the

createQuery

createQuery

arg

binajmenOP•4/17/24, 4:38 PM

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•4/17/24, 4:38 PM

you'll need to pass an accessor to

getProgram

getProgram

too like () => searchParams.id() => searchParams.id

binajmenOP•4/17/24, 4:38 PM

are you suggestint to pass the searchParams instead of searchParams.id?

binajmenOP•4/17/24, 4:38 PM

I see\

binajmenOP•4/17/24, 4:40 PM

yup working

binajmenOP•4/17/24, 4:40 PM

still not used to these "tricks", thank you