Is it ok to use initialData with previousData?

[moroshko]

I created a custom hook that has both initialData and placeholderData:

export const useFruits = (query: string) => {
  return useQuery<SuccessResponse>({
    queryKey: ["fruits", query],
    queryFn: async () => {
      await new Promise((resolve) => setTimeout(resolve, 2000)); // emulate network latency

      return {
        fruits: fruits.filter((fruit) =>
          fruit.toLowerCase().startsWith(query.toLowerCase())
        ),
        query,
      };
    },
    initialData: {
      fruits: ["Banana", "Blackberry"],
      query,
    },
    placeholderData: keepPreviousData,
  });
};

I added initialData because I fetch the data in a Server Component in Next.js app and it's available to populate the cache on the client. Also, I like how TypeScript understands that data will always exist:

const Fruits = () => {
  const [query, setQuery] = useState("b");
  const fruitsInfo = useFruits(query); // fruitsInfo.data will never be undefined
  const { fruits, query: highlightQuery } = fruitsInfo.data;

  console.log({
    isFetching: fruitsInfo.isFetching,
    fruits,
    highlightQuery
  });

  // Render matched fruits here and highlight the text matching `highlightQuery`
};

I also added placeholderData: keepPreviousData because I'd like to show the user the previous data while the new data is being fetched.

However, when I change the query from "b" to "bb", I see:

{
  "isFetching": true,
  "fruits": [
    "Banana",
    "Blackberry"
  ],
  "highlightQuery": "bb"   // why not still "b" here?
}
{
  "isFetching": false,
  "fruits": [],
  "highlightQuery": "bb"    // only here I expect it to be "bb"
}

Why is highlightQuery updated before we get the result?

Is it ok to use initialData with previousData in the same useQuery?

This article by @TkDodo implies that we should use one or the other 🤔

Here is a CodeSandbox that demonstrates the actual "real-life" issue.
Initially, "b" is highlighted. When I update the query to "bb" you can see that the highlight disappears (because highlightQuery is updated before we get the result).
What's the best way to fix this?

[TkDodo]

Is it ok to use initialData with previousData in the same useQuery?

it doesn’t achieve much. previousData is only used when there is no data in the cache while you are transitioning between cache entries, but if you unconditionally set initialData, there will always be data in the cache (because initialData puts data into the cache)

[moroshko]

@TkDodo thanks for this, good to know!

Could you explain why the highlightQuery is updated too early?

Also, if I return the initial data from placeholderData:

placeholderData: (previousData) => {
  if (previousData === undefined) {
    // initial data
    return {
      fruits: ["Banana", "Blackberry"],
      query,
    };
  }

  return previousData;
}

Is there a reason fruitsInfo.data can't always exist here?

const fruitsInfo = useFruits(query);
console.log(fruitsInfo.data); // should never be undefined since `placeholderData` always returns a value

[TkDodo]

should never be undefined since placeholderData always returns a value

placeholderData doesn’t go to the cache, so if your query errors, data will go back to undefined. See: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query

[TkDodo]

Could you explain why the highlightQuery is updated too early?

I don’t know what you mean with that. Please show a stackblitz or codesandbox reproduction that shows your issue

[moroshko]

I don’t know what you mean with that. Please show a stackblitz or codesandbox reproduction that shows your issue

CodeSandbox is included in the original post @TkDodo

[TkDodo]

Could you explain why the highlightQuery is updated too early?

what do you mean with too early? From what I can see, everything is fine in the sandbox.

I type in “a”. This creates a new query with “fruits, a”, and I get back:

{
  "isFetching": true,
  "fruits": [
    "Banana",
    "Blackberry"
  ],
  "highlightQuery": "a"
}

those values come from the initialData passed, which is fine.

Then I type “b”. The query is now “ab”, so it creates a new query “fruits, ab”. That again gets initialData (because that’s what the code does - it’s a completely new query), so we get:

{
  "isFetching": true,
  "fruits": [
    "Banana",
    "Blackberry"
  ],
  "highlightQuery": "ab"
}

if you’d expected highlightedQuery to stay a here because you use placeholderData, then we need to go back to what I already said, and what the blogpost also says: placeholderData only works as a placeholder for when the query has no real data, but initialData is real data, so IT DOES NOTHING here. You can remove it and it will behave exactly the same.

if you want to apply initialData only when the component mounts the first time or whatever, then set initialData conditionally:

initialData: doIWantToSetInitialDataBaseOnSomeThingsThatOnlyIKnow ? { ... } : undefined

then, it “will work”