Data is undefined even with placeholderData

[buglessir]

I'm trying to use "Query Object" instead parameters in my query:

export const NewsListObj = (pageOptions, config) => ({
  queryKey: ['NewsList', pageOptions],
  queryFn: () => fetchNewsList(pageOptions),
  placeholderData: {
    list: [],
    totalElements: null
  },
  ...config
});

and I use it like this:

const NewsList = () => {
  const [pageOptions, setPageOptions] = useState({});
  const { data, error, isLoading } = useQuery(NewsListObj(pageOptions));

  return {
    <>
      { console.log(data) }
    </>
  }
}

While it was unbelievable data is undefined and it doesn't show placeholder data first time in console.log, but returns the data when fetching is completed...

[TkDodo]

please provide a codesandbox example, because this is pretty much what placeholderData is for, and last time I checked, it worked very well.

[buglessir]

I've checked again, that happens due to select in QueryClient, this is our client:

const appQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      select: (data) => data.data,
      refetchOnWindowFocus: false,
      staleTime: 60000, // 1 minute
    },
  },
});

I removed select and that placeholderData works well:

const appQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      staleTime: 60000, // 1 minute
    },
  },
});

Is it something like a bug?

[TkDodo]

Is it something like a bug?

it is not. placeholderData runs through select, just like data returned from your queryFn - so whatever you put into placeholderData must have the same structure. TypeScript would catch something like this.

so if you extract data.data in select, it means that your placeholderData must also look like that:

placeholderData: {
  data: {
    list: [],
    totalElements: null
  },
}