TanStack•13mo ago•

5 replies

brilliant-lime

Non-undefined placeholderData types as possibly undefined

If my

placeholderData

placeholderData

function always returns a proper result (not undefined), then why is the resulting

data

data

property typed as

T | undefined

T | undefined

?

Consider the following example:

function useBook() {
  const bookId = useBookId();

  return useQuery({
    queryKey: ["book", bookId] as ["book", number],
    queryFn: ({queryKey: [, bookId]}) => fetchBook(bookId),
    placeholderData: (previousBook) => previousBook ?? {id: 123, title: "Default Book"},
  });
}

function useBookTitle() {
  const {data: book} = useBook();
  return book.title;
}

function useBook() {
  const bookId = useBookId();

  return useQuery({
    queryKey: ["book", bookId] as ["book", number],
    queryFn: ({queryKey: [, bookId]}) => fetchBook(bookId),
    placeholderData: (previousBook) => previousBook ?? {id: 123, title: "Default Book"},
  });
}

function useBookTitle() {
  const {data: book} = useBook();
  return book.title;
}

Shouldn't

placeholderData

placeholderData

always (synchronously, without loading) stand in for

data

data

while loading/fetching/intializing/etc?

If not, how can I achieve this? In other words, how can I seed this particular query observer with a known value?

(In practice, the above code does not error as far as I've tested. I also tried

initialData

initialData

, but that seems to override

placeholderData

placeholderData

with flashes back to the inital value -- I want the use-the-previous-thing behavior)

TanStack•13mo ago•

5 replies

brilliant-lime

Non-undefined placeholderData types as possibly undefined

If my

placeholderData

placeholderData

function always returns a proper result (not undefined), then why is the resulting

data

data

property typed as

T | undefined

T | undefined

?

Consider the following example:

function useBook() {
  const bookId = useBookId();

  return useQuery({
    queryKey: ["book", bookId] as ["book", number],
    queryFn: ({queryKey: [, bookId]}) => fetchBook(bookId),
    placeholderData: (previousBook) => previousBook ?? {id: 123, title: "Default Book"},
  });
}

function useBookTitle() {
  const {data: book} = useBook();
  return book.title;
}

function useBook() {
  const bookId = useBookId();

  return useQuery({
    queryKey: ["book", bookId] as ["book", number],
    queryFn: ({queryKey: [, bookId]}) => fetchBook(bookId),
    placeholderData: (previousBook) => previousBook ?? {id: 123, title: "Default Book"},
  });
}

function useBookTitle() {
  const {data: book} = useBook();
  return book.title;
}

Shouldn't

placeholderData

placeholderData

always (synchronously, without loading) stand in for

data

data

initialData

initialData

, but that seems to override

placeholderData

placeholderData

with flashes back to the inital value -- I want the use-the-previous-thing behavior)

Non-undefined placeholderData types as possibly undefined

Similar Threads

Non-undefined placeholderData types as possibly undefined

Similar Threads

Similar Threads

Similar Threads