TanStackT
TanStack•9mo ago•
3 replies
uncertain-scarlet

synchronous state with query? is this ok?

i've typically heard react query referred to as an async state manager, in addition to server state

my questin is, is there anything inherently wrong with using it for synchronous state, for the sake of keeping the code style/toolchain consistent?

i have a one big piece of data that my whole application needs access to, and i need to initialize it when its provider mounts. previously i was just useEffect(() => ..., []) and setting the value with 
useState
 in there

i've modified it now to do this. this isn't async nor server state- is there any footguns here i need to be aware of, or anything simply incorrect?
const zeroQueryOptions = (userId: string, getToken: () => Promise<string>) =>
  queryOptions({
    queryKey: ["zero"],
    queryFn: () => {
      return createZero(userId, getToken); // create zero client
    },
  });

export const ZeroProvider = (props: PropsWithChildren) => {
  const auth = useAuthentication();
  const zeroQuery = useQueryTanstack(
    zeroQueryOptions(auth.user.id, auth.getAccessToken)
  );

  if (zeroQuery.status === "pending") return null;

  if (zeroQuery.status === "error") return <div>Issue syncing data, please try again later</div>;

  return (
    <ZeroProviderInternal zero={zeroQuery.data}>{props.children}</ZeroProviderInternal>
  );
};
Was this page helpful?