How to set initialData so that typescript casting isn't required

[DannyDelott]

This is such an awesome, powerful library and given how expressive useQuery is, I'm wondering if there are specific configuration patterns that work better for TypeScript users than my naive parsing of the docs.

In particular, is there a "best practice" or common idiom for setting the initialData such that casting isn't required?

The problem

Here's an example w/ inline comments:

interface TMyData {
  data: any;
}

function useExampleQuery() {
  const { data: exampleData } = useQuery<TMyData>(
    "my-key",
    () => ({
      data: "my data",
    }),
    {
      // I think this means `data` will never be `undefined`
      initialData: { data: "initial data" },
    }
  );

  // 🚩 `exampleData` is typed as `TMyData | undefined` despite `initialData` being set.
  return exampleData;
}

Possible solution

I'm currently solving this with a "cast and comment", essentially codifying my understanding of the useQuery api:

function useExampleQuery() {
  ...
  return exampleData as TMyData; // safe to cast when initialData is set in useQuery
}

Another possible solution

An alternative is to set an es6 default value on data, but that feels wrong. I'd prefer to let useQuery be in control of data's value:

function useExampleQuery() {
  const { data: exampleData = { data: "initial data" } } = useQuery<TMyData>(
    "my-key",
    () => ({
      data: "my data",
    })
  );

  return exampleData;
}

[TkDodo]

we discussed this a bit here: #1297

or at least it is similar. I think that if the query is enabled: false, data might still be undefined (not sure though with initialData - can you maybe verify that?). v3 has disjoint union types depending on the status prop, so you can check for status === 'success' then data will also be defined on type level.

[DannyDelott]

Thanks for the reply! I tested the case where enabled: false + giving a value for initialData and it does still return the initialData. I believe this is because initialData gets persisted to the cache.

[TkDodo]

hm, not sure if we can "solve" this on type level even if there is really no case where data can be undefined if we have initialData provided 🤔 . Can initialData also be set globally? That would make it extremely hard to type...

@boschni maybe?

[boschni]

Yeah basically any configuration value can be set globally which means we do not know the actual value during compilation and returning different types based on various configuration values can also easily result into very complex types unfortunately.

[DannyDelott]

I'm not sure I understand the limitation here w/r/t global config. I don't see where that applies here.

For example, useQuery has a generics signature already that lets you define the type of data you're dealing with for that particular call:

export declare function useQuery<TResult = unknown, TError = unknown>(queryKey: QueryKey, queryConfig?: QueryConfig<TResult, TError>): QueryResult<TResult, TError>;

this means I can say something like:

const { data: myFlag } = useQuery<boolean>('my-key', async () => fetchFlag());

And everything works great! (data is typed as "boolean | undefined", and TResult is able to used elsewhere in the type signature of this useQuery call to narrow or build other types)

At the same time, you can insert anything into the query cache directly w/ queryCache.setQueryData(), ie: there is nothing stopping you from then saying:

queryCache.setQueryData('my-key', "definitely not a boolean");

What is special about TResult that it can be configured at the useQuery level and work fine despite the ability to configure the cached value globally?

[wtanna]

I'm curious if anyone has solved this yet? I'm running into the same issue. Real simple hook

const useFetchGeoData = (options = {}): UseQueryResult<Geo[]> => {
  return useQuery<Geo[]>("geos", fetchGeos, {
    ...options,
    initialData: [],
  });
};

then the consuming components look like

  const { data: geos } = useFetchGeoData({
    notifyOnChangeProps: ["data"],
  });

With the initialData it's never going to be undefined, it's always going to be some form of an empty array. I'm trying to avoid having to use the non-null assertion operator everywhere.

I'm aware I could do something like

const useFetchGeoData = (options = {}) => {
  const query = useQuery<Geo[]>("geos", fetchGeos, options);

  return {
    ...query,
    data: query?.data ?? [],
  };
};

But the project I'm on also requires a return type, which UseQueryResult no longer works in the above solution and I'd like to avoid having to type out my own interface if I can avoid it.

[xmd5a]

also the same issue occur when you use placeholderData - which basically means you should never have undefined 🤔 right?

[TkDodo]

not true. if the query errors, placeholderData goes to the previous state, which is undefined. See: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query

[xmd5a]

thank you for explaining!

//edit:
your articles are so great!

[hunterwilhelm]

Hey I know that this is an old discussion. However, for those that come here googling like I did, I have a clean solution for this problem.

You can add initial data in typescript when unpacking the query like this.

const { data: items = [] } = useQuery(QUERIES.items, API.getAllItems);

[TkDodo]

this is conceptually pretty different though. For once, the status of the query will still be loading. Also, with initialData, you can prevent a fetch if you also have a staleTime set.

[Paiva2]

Thanks man, helped me.

[rgascons]

Hi from the future, this is the solution I found:

{myQuery.isSuccess && <Component name={myQuery.data!.name} />}

I think using the ! operator is safe here, given that isSuccess is true.

[TkDodo]

isSuccess acts as a discriminator, so this should also work without the bang operator:

{myQuery.isSuccess && <Component name={myQuery.data.name} />}

[martinezguillaume]

For me, I'm using this piece of code

  const query = useQuery({
    ...options,
    initialData,
  });
  if (!query.data) {
    throw 'data should be defined at this point';
  }
  return query; // query.data is always defined here

Don't know if it's good practice 😬

[TkDodo]

we shipped a PR in a v4 that makes data always defined on type level if initialData was provided. This shouldn't be necessary

[piotrpalek]

sorry to revive this old thread, but what about placeholderData? it doesn't seem to narrow down the type in v4

[TkDodo]

because it works differently: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query