Storage hook `undefined` during initial render

const { queryKey, schema, defaultValue, queryOptions } = props;
  const storageKey = queryKey.join('.');
  const query = useQuery({
    queryKey,
    queryFn: async () => {
      const store = await chromeLocalStorage.get<T>(storageKey);
      const result = schema.safeParse(store);
      if (!result.success) {
        return defaultValue;
      }
      return result.data;
    },
    suspense: true,
    meta: {
      storable: false,
    },
    ...queryOptions,
  });

  useEffect(() => {
    chromeLocalStorage.watch({
      [storageKey]: (change: { newValue: T }) => {
        if (!_.isEqual(change.newValue, query.data)) {
          query.refetch();
        }
      },
    });
  }, [query, storageKey]);

  const mutation = useMutation({
    mutationFn: async (setter: Setter<T>) => {
      const newValue = setter instanceof Function ? setter(query.data) : setter;

      const result = schema.safeParse(newValue);
      if (!result.success) {
        throw new Error(
          `Invalid data passed to setter function. Failed validation ${result.error.message}`,
        );
      }
      await chromeLocalStorage.set(storageKey, result.data);
      return result.data;
    },
    onSuccess() {
      query.refetch();
    },
  });

  return {
    query,
    mutation,
  };

const { queryKey, schema, defaultValue, queryOptions } = props;
  const storageKey = queryKey.join('.');
  const query = useQuery({
    queryKey,
    queryFn: async () => {
      const store = await chromeLocalStorage.get<T>(storageKey);
      const result = schema.safeParse(store);
      if (!result.success) {
        return defaultValue;
      }
      return result.data;
    },
    suspense: true,
    meta: {
      storable: false,
    },
    ...queryOptions,
  });

  useEffect(() => {
    chromeLocalStorage.watch({
      [storageKey]: (change: { newValue: T }) => {
        if (!_.isEqual(change.newValue, query.data)) {
          query.refetch();
        }
      },
    });
  }, [query, storageKey]);

  const mutation = useMutation({
    mutationFn: async (setter: Setter<T>) => {
      const newValue = setter instanceof Function ? setter(query.data) : setter;

      const result = schema.safeParse(newValue);
      if (!result.success) {
        throw new Error(
          `Invalid data passed to setter function. Failed validation ${result.error.message}`,
        );
      }
      await chromeLocalStorage.set(storageKey, result.data);
      return result.data;
    },
    onSuccess() {
      query.refetch();
    },
  });

  return {
    query,
    mutation,
  };

const { id } = props;
const { beautifulDashboardMutation, beautifulDashboardQuery } =
    useBeautifulDashboardStorage({ id });

// No if statements or anything required for loading/errors, the wrapping suspense/error boundary will take care of all of that

const { id } = props;
const { beautifulDashboardMutation, beautifulDashboardQuery } =
    useBeautifulDashboardStorage({ id });

// No if statements or anything required for loading/errors, the wrapping suspense/error boundary will take care of all of that

export function useBeautifulDashboardStorage({ id }: { id: string }) {
  const KEY = ['storage', 'dashboards', 'beautiful', id];
  const { query, mutation } = useBuildHooks({
    queryKey: KEY,
    defaultValue,
    schema,
  });

  if (!query.data) throw new Error(`Suspense not called for ${KEY.join('.')}}`);

  return {
    beautifulDashboardQuery: query,
    beautifulDashboardMutation: mutation,
  };
}

export function useBeautifulDashboardStorage({ id }: { id: string }) {
  const KEY = ['storage', 'dashboards', 'beautiful', id];
  const { query, mutation } = useBuildHooks({
    queryKey: KEY,
    defaultValue,
    schema,
  });

  if (!query.data) throw new Error(`Suspense not called for ${KEY.join('.')}}`);

  return {
    beautifulDashboardQuery: query,
    beautifulDashboardMutation: mutation,
  };
}

const persistOptions: Omit<PersistQueryClientOptions, 'queryClient'> = {
  persister: asyncStoragePersister,
  dehydrateOptions: {
    shouldDehydrateQuery: (query) => {
      const isValid = query.state.status === 'success';
      const isStorable = (query.meta?.storable as boolean) ?? true;
      return isValid && isStorable;
    },
  },
};

const persistOptions: Omit<PersistQueryClientOptions, 'queryClient'> = {
  persister: asyncStoragePersister,
  dehydrateOptions: {
    shouldDehydrateQuery: (query) => {
      const isValid = query.state.status === 'success';
      const isStorable = (query.meta?.storable as boolean) ?? true;
      return isValid && isStorable;
    },
  },
};