useQuery & undefined data

[salmanbabri]

Hi, I've been using react-query for some time now, and so far enjoying it. However, one thing that I find odd is data being undefined from useQuery. For example, let's look at the following code.

const { data } = useQuery("active-events", () => getEventsAsync());

In the above code, getEventsAsync() will always return an array or throw an error.

Here, data is supposed to be an array, but since the type is union with undefined I'll need to do the following before consuming it in my component further,

const events = data ?? [];

In case of errors, loading etc, we already have flags from useQuery to check them, is there a better way to avoid undefined type be scattered across my code?

In short, I want to avoid undefined & unnecessary null checks in my codebase as they can cause a lot of headaches later on. How do you guys approach this issue?

Edit: Even if I pass initialData to useQuery as an empty array, the type of data will still remain as MyEvent[] | undefined, and I'll still need to handle null check to tell typescript that data can never be undefined.

[jaworek]

Have you tried using initialData and initialStale? This way you can specify empty array [] and because you mark it as stale it will fetch data from server automatically.
https://react-query.tanstack.com/docs/api#usequery

[salmanbabri]

Yes, I've tried that. The problem is that even though data will start with [] instead of undefined, but it's type will still remain a MyType[] | undefined, forcing me to handle null check somewhere.

[jaworek]

You can overwrite inferred type like that. I'm assuming you are using TypeScript. This way type of data will be MyType instead of MyType | undefined
useQuery<MyType>("active-events", () => getEventsAsync());

[salmanbabri]

Tried that too, but it doesn't work, the type still remains as MyType | undefined. The reason is that in QueryResultBase interface, type of data is TResult | undefined, where TResult is determined by typescript or you provided explicitly.

[DannyDelott]

This feels related to #1301 w/r/t initialData and how specifying it won't narrow down the return type.

[jaworek]

Then if you want to show loader even though you have data you can use isFetching from hook to check if data is being loaded.

[adamhp]

I tried this approach, but it doesn't seem to work. Would love some insight here:

https://codesandbox.io/s/hopeful-lamarr-j6xse?file=/src/index.js

[jaworek]

I found it a bit tricky because usually I prefer to use isLoading which does not show if it is refetching data, but when you use it with these properties you do not get loader on first fetch, which usually results in showing "No data" and then displaying the list without indicating to user that everything is loading correctly.
If someone knows better solution, please let me know.

[justinhp]

still, can't you supply placeholder data with the idea that the placeholder data is used until the request is complete? so I would assume then that the type being returned, if the placeholder data is in place or the initial state data is in place would be the type of that placeholder/initial data and we would not even be given the possibility that it is undefined?

[audn]

@justinhp pretty sure you can use an useEffect to give it placeholder data until your real data is there

[TkDodo]

still, can't you supply placeholder data with the idea that the placeholder data is used until the request is complete? so I would assume then that the type being returned, if the placeholder data is in place or the initial state data is in place would be the type of that placeholder/initial data and we would not even be given the possibility that it is undefined?

placeholderData or initialData do not narrow the type, this has been reported multiple times:

• Specifying placeholder or initial data should give data prop a different type #2288
• Type of data not corresponding to the initialData #2163
• How to set `initialData` so that typescript casting isn't required #1301

pretty sure you can use an useEffect to give it placeholder data until your real data is there

@audn why would you need a useEffect for that?

[audn]

@TkDodo how would you do it?

[TkDodo]

useQuery(key, fn, { placeholderData })

🤷

[ideffix]

When you need to load data once e.g. on the application start, I personally like to use "Gate" component. The role of the gate is to stop futher rendering as long as data is not loaded yet. When data is finally loaded I use context&customHook to read my initial data. At this point Im sure that my data will not be undefined. You can check a PoC here:
https://stackblitz.com/edit/react-ts-x65k5x?file=index.tsx

[vbylen]

That is pretty crafty.

[nedgrady]

Couldn't agree more with the issue of the undefined/null checks polluting code base.

[TkDodo]

The only thing that could potentially narrow the type from TData | undefined to TData safely is the presence of initialData. If a TypeScript wizard can contribute that, I would happily merge it :)

[nedgrady]

FYI our workaround pattern is to handle the undefined scenarios in a custom hook (probably a good idea to wrap queries in custom hooks anyways for reusability!)

Example:

interface ToDoItem {
    name: string;
}

// Custom ToDo hook
function useToDoItems() {
    const fetcher = async () => {
        return (await axios.get<ToDoItem[]>("/todos")).data;
    }

    const queryResult = useQuery(["todos"], fetcher);

    // Handle the undefined case by giving some "initial data"
    return { todos: queryResult.data ?? [], ...queryResult }
}

function App() {
    const { todos, data } = useToDoItems();

    return <>
        { /* todos is always populated */ }
        {todos.map(toDo => <p>{toDo.name}</p>)}
        { /* avoid using data directly - Object is possibly 'undefined'.ts(2532) */ }
        {data.map(toDo => <p>{toDo.name}</p>)}
    </>
}

export default App;

I had a look around the code base to see if I could tweak the types as per above - I think its beyond me!

[cgatian]

When supplying an initialData I cast my useQuery response to the QueryObserverSuccessResult type. data is then always defined.

const useTheme = () => {
  return useQuery(
    ['theme'],
    () => getTheme()
    {
      initialData: DEFAULT_THEME,
    },
  ) as QueryObserverSuccessResult<Theme, never>;
};

[kaguya3222]

Pretty cool solution, but ts won't tell you that there is something wrong if you accidentally delete initialData

[cgatian]

This is not a good solution because it's always successful even if your QueryFn returns an error.

[kaguya3222]

Any update on this? I don't really understand how data could be undefined if I provide initialData to query?

[TkDodo]

#3557

[avck25]

I noticed as well that initialData doesn't change the T | undefined however u can default the de-structured data

const { data: orders = [], isLoading, error, } = useQuery( 'orders', () =>...

[TkDodo]

I noticed as well that initialData doesn't change the T | undefined

it does in the latest version (v4)

[red17electro]

Not sure if I am asking at the right place, but I am using initialData: [], in my useQuery as options, and still getting the data as undefined. How is it possible, or am I missing something?

[red17electro]

And does it make sense to use placeholderData and initialData at the same time? I need placeholderData, since sometimes with initialData I get undefined value, but I need to have initialData as well, in order to cover that TypeScript error with undefined value 😕

[TkDodo]

I am using initialData: [], in my useQuery as options, and still getting the data as undefined

do you mean undefined at runtime or in the typescript types? A codesandbox reproduction would be helpful.

And does it make sense to use placeholderData and initialData at the same time?

No, you would always see the initialData in this case.

[red17electro]

Hi @TkDodo , thank you for the response!

Please check out the sandbox here.

I have initialData defined in the query as an empty array. Then, onMouseEnter of the button, I prefetch users data. Once clicking the button, I display the component that also fetches users data (and since it is prefetched, it should be displayed fast, otherwise initial data should be displayed). However, an error is thrown, when you click the button:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

Can you please have a look what could I be doing wrong here?

Thank you!

[red17electro]

I prefetch users data.

Well, I looked into it and I think I found what solves the issue. The prefetch query also has to have a defined initialData, in order for the error to go away. Felt a bit counter-intuitive, to be honest.

[TkDodo]

your situation is the following:

• you hove the button, which triggers prefetching
• no cache entry exists for the key ["data"], so it will be created, with empty initial data
• when useQuery runs for the first time, it sees that there is already a cache entry created, so it cannot add initialData again, because that is only considered on query creation.

Essentially, you would want to streamline the options passed to prefetchQuery and useQuery, something like this:

export const dataQueryOptions = {
  queryKey: ["data"],
  queryFn: ({ signal }: QueryFunctionContext) => getData({ signal }),
  initialData: [],
};

https://codesandbox.io/p/sandbox/heuristic-zeh-4gp0fw?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A11%2C%22endLineNumber%22%3A15%2C%22startColumn%22%3A11%2C%22startLineNumber%22%3A15%7D%5D

[the-programmer-alex]

When having multiple queries, you can't destructure because the repeated data fields. However, that means you can't preset the data field to [], hence typescript thinks data is undefined.

  // Fails, double data field declared
   const {status, data = [], error, isLoading} = useQuery('users', fetchUsers)
   // Below is type teamsAPIType[]. No longer undefined
   const {status, data = [], error, isLoading} = useQuery('teams', fetchTeams)

Seems like the only real option would be to add another field like nedgrady's solution

    const { getQuests } = useAPI()

    const useGetTeams = () => {
        const queryResult = useQuery<teamsAPIType[], AxiosError>(
            'teams',
            async () => {
                const data = await getTeams()
                    .then(res => {
                        return res.data
                    })
                    .catch((err: AxiosError) => {
                        throw err
                    })

                return data
            },
            {
               // This doesn't fix the undefined issue
                initialData: []
            }
        )

        return { teams: queryResult.data ?? [], ...queryResult }
    }

    // Now teams is not undefined
    const { status, teams, error, isLoading } = useGetTeams();

[TkDodo]

this seems more like a pure javascript problem than a react query one. I mean, you can re-name during destructuring:

const { data: users = [] } = useQuery('users', fetchUsers)
const { data: teams = [] } = useQuery('teams', fetchTeams)

or:

const usersQuery = useQuery('users', fetchUsers)
const teamsQuery = useQuery('teams', fetchTeams)

const users = usersQuery.data ?? []
const teams = teamsQuery.data ?? []

there are probably more ways to do this :)

as far as react-query is concerned, you can also use placeholderData or initialData: https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query

[igor47]

you can't destructure because the repeated data fields.

@the-programmer-alex i might be misunderstanding, but why not just alias the destructuring?

   const {data: usersData = []} = useQuery('users', fetchUsers)
   // Below is type teamsAPIType[]. No longer undefined
   const {data: teamsData = []} = useQuery('teams', fetchTeams)

[stychu]

I have custom hook with staleTime = Infinity

export const useAppContext = () =>
  api.appContext.getAppContext.useQuery(undefined, { staleTime: Infinity })
```

Is it possible to force this hook to not yell about possible undefined value whenever I would like use the hook? It fires on the first render of the whole app and then whenever I use it I know the data is there but it forces me to check for undefined or mark variable with ! which Is annooying. Can I somehow overcome this ?

```
  const { data } = useAppContext()

 data!.authorisation.userDisplayName```