Can I use useQuery with only initialData (no queryKey nor queryFn)?

[tran-simon]

hi

I'm creating a custom hook to get some data form an id.
I have some default data included in my app that I can return synchronously if the id matches.
Else, I need to fetch the data:

const useDocument = (id: string): UseQueryResult<Doc> => {
  const defaultDocument = documents[id];

  const customDocument = useQuery<DBDoc, unknown, Doc>({
    queryKey: ['custom-doc', id],
    queryFn: async () => {
      return fetchDoc(id);
    },
    select: (data: DBDoc) => {
      // ... transform data

      return {} as Doc;
    },
    enabled: !defaultDocument.data,
  });

  return defaultDocument ?? customDocument.data;
};

I would like my function to return a UseQueryResult object (so I can access isLoading in the case that the document is custom.

Would this work?

const useDocument = (id: string): UseQueryResult<Doc> => {
  const defaultDocument = useQuery<Doc>({
    initialData: documents[id],
  });

  const customDocument = useQuery<DBDoc, unknown, Doc>({
    queryKey: ['custom-doc', id],
    queryFn: async () => {
      return fetchDoc(id);
    },
    select: (data: DBDoc) => {
      // ... transform data

      return {} as Doc;
    },
    enabled: !defaultDocument.data,
  });

  return defaultDocument.data ? defaultDocument : customDocument;
};

I cannot put initialData directly in the customDocument useQuery, because the queryFn returns an object of a different type (that's why I need the select function. initialData needs to be the type of the return value of the queryFn.

[dominikdosoudil]

I guess that you could actually go around the react-query itself. It even seems to me that it might be more performant.

const synthesizeSuccess = (data: Doc): QueryObserverSuccessResult<Doc, Error> => ({
  data,
  error: null,
  isError: false,
  isPending: false,
  isLoading: false,
  isLoadingError: false,
  isRefetchError: false,
  isSuccess: true,
  status: 'success',
  dataUpdatedAt: 0,
  errorUpdatedAt: 0,
  failureCount: 0,
  failureReason: null,
  errorUpdateCount: 0,
  isFetched: true,
  isFetchedAfterMount: true,
  isFetching: false,
  isInitialLoading: false,
  isPaused: false,
  isPlaceholderData: false,
  isRefetching: false,
  isStale: false,
  refetch: (_opts?: RefetchOptions) => Promise.resolve(synthesizeSuccess(data)),
  fetchStatus: 'idle',
  promise: Promise.resolve(data),
});

const documents: Record<string, Doc> = {};
type DBDoc = {
  bar: string;
};
type Doc = {
  foo: number;
};

const useDocument = (id: string): UseQueryResult<Doc, Error> => {
  const defaultDocument = useMemo(() => {
    const doc = documents[id];
    if (doc) {
      return synthesizeSuccess(doc);
    }
    return null;
  }, [id]);

  const query = useQuery({
    queryKey: ['custom-doc', id],
    queryFn: async () => {
      return Promise.resolve({} as DBDoc);
    },
    select: (data: DBDoc): Doc => {
      // ... transform data

      return {} as Doc;
    },
    enabled: defaultDocument === null,
  });

  return defaultDocument !== null ? defaultDocument : query;
};

[tran-simon]

I guess this would work, but it would be great if there was a built-in way of doing this.

[TkDodo]

if defaultDocument is already transformed, you can’t use it as initial data.

If you don’t need different transformations per useQuery call, I wouldn’t use select, but transform it in the queryFn. Then, you can also use initialData.

[tran-simon]

I reuse all my queries a lot (I'm using query-key-factory). I'm using select, because when I query a custom document all I want stored in the cache is the DBDoc object.

That way, I can reuse the same query to get the same data in the cache, but transform it using select .

I'm looking for a way to create a query that depends on other queries (so that I can get the status state (isLoading) of all the queries):

const useDocument = (id: string) => {
  const defaultDocument = documents[id];

  const customDocument = useQuery({
    queryKey: ['custom-doc', id],
    queryFn: async () => fetchDoc(id),
    select: (data: DBDoc) => {
      // ... transform data
    },
    enabled: !defaultDocument,
  });
  
  return {
    isLoading: customDocument.isLoading,
    data: defaultDocument ?? customDocument.data,
    // ... Other UseQueryResult props
  } 
};

It would be great to be able to do something like this for multiple queries. The doc Dependent Queries explains how to have queries depend on other, but I want to extract all my dependant queries to a custom hook that returns a single UseQueryResult object