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(() => ..., [])

useEffect(() => ..., [])

and setting the value with

useState

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

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

TanStack•11mo ago•

3 replies

uncertain-scarlet

synchronous state with query? is this ok?

useEffect(() => ..., [])

useEffect(() => ..., [])

and setting the value with

useState

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

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

synchronous state with query? is this ok?

Similar Threads

synchronous state with query? is this ok?

Similar Threads

Similar Threads

Similar Threads