Is this cursed? Anyone knows a better way to achieve it?

I am using Zustand and i want to trigger the query anytime the value changes. Using

useGlobalStore.getState().selectedProvider

useGlobalStore.getState().selectedProvider

to not break the rule of hooks does not work, as it isn't reactive. This can be obviously fixed if i just do a proper custom hook instead of just using the queryOptions, but wanted to know if this is accepted or if there is a good way to do it like this, else i'll just make it a custom hook

export function getUsersQueryOptions(params: QueryUserDto) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const adminSelectedProvider = useGlobalStore(
    (state) => state.selectedProvider
  );
  const providerId = adminSelectedProvider ?? undefined;

  return queryOptions({
    queryKey: queryKeyFactory.list({
      providerId,
      ...params,
    }),
    queryFn: () => getUsers({ providerId, ...params }),
  });
}

export function getUsersQueryOptions(params: QueryUserDto) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const adminSelectedProvider = useGlobalStore(
    (state) => state.selectedProvider
  );
  const providerId = adminSelectedProvider ?? undefined;

  return queryOptions({
    queryKey: queryKeyFactory.list({
      providerId,
      ...params,
    }),
    queryFn: () => getUsers({ providerId, ...params }),
  });
}

TanStack•9mo ago•

1 reply

rubber-blue

Is this cursed? Anyone knows a better way to achieve it?

I am using Zustand and i want to trigger the query anytime the value changes. Using

useGlobalStore.getState().selectedProvider

useGlobalStore.getState().selectedProvider

export function getUsersQueryOptions(params: QueryUserDto) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const adminSelectedProvider = useGlobalStore(
    (state) => state.selectedProvider
  );
  const providerId = adminSelectedProvider ?? undefined;

  return queryOptions({
    queryKey: queryKeyFactory.list({
      providerId,
      ...params,
    }),
    queryFn: () => getUsers({ providerId, ...params }),
  });
}

export function getUsersQueryOptions(params: QueryUserDto) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const adminSelectedProvider = useGlobalStore(
    (state) => state.selectedProvider
  );
  const providerId = adminSelectedProvider ?? undefined;

  return queryOptions({
    queryKey: queryKeyFactory.list({
      providerId,
      ...params,
    }),
    queryFn: () => getUsers({ providerId, ...params }),
  });
}

Is this cursed? Anyone knows a better way to achieve it?

Similar Threads

Is this cursed? Anyone knows a better way to achieve it?

Similar Threads

Similar Threads

Similar Threads