RTK Query: Middleware – Property ‘error’ does not exist on type ‘{}’

If you’re reading this, chances are you’ve stumbled upon the infamous “Property ‘error’ does not exist on type ‘{}'” error while working with RTK Query, a powerful caching and data fetching library for Redux. Don’t worry, you’re not alone! In this article, we’ll dive deep into the root cause of this issue and provide a step-by-step guide on how to fix it.

The Error: Property ‘error’ does not exist on type ‘{}’

The error message itself is quite cryptic, but don’t worry, it’s not as complicated as it seems. Essentially, the error is telling you that TypeScript is complaining about the `error` property not existing on an object of type `{}`. But what does this mean in the context of RTK Query?

What is RTK Query?

Before we dive into the error, let’s take a quick detour to explain what RTK Query is. RTK Query is a caching and data fetching library for Redux, built on top of React Query. It provides a simple and efficient way to manage data fetching, caching, and retries in your Redux application. With RTK Query, you can easily create APIs, handle errors, and cache data without writing a ton of boilerplate code.

What Causes the Error?

So, what causes the “Property ‘error’ does not exist on type ‘{}'” error? To understand this, let’s take a look at how RTK Query works. When you create an API using RTK Query, it returns an object with three properties: `data`, `error`, and `isLoading`. The `error` property is where the error response is stored, but only if an error occurs.

The issue arises when TypeScript tries to access the `error` property on an empty object `{}`, which is what’s returned by RTK Query when there’s no error. This is because TypeScript is trying to enforce type safety, and it doesn’t know about the `error` property on an empty object.

Fixin’ the Error!

Now that we know the root cause of the error, let’s fix it!

Step 1: Update your RTK Query Version

If you’re using an older version of RTK Query, chances are the error is due to a type definition issue. Make sure you’re running the latest version of RTK Query by running the following command:

npm install @reduxjs/toolkit@latest

Step 2: Use the Correct Type for the `error` Property

In your API definition, update the type for the `error` property to `undefined | Error` instead of just `Error`. This tells TypeScript that the `error` property can be either `undefined` or an instance of the `Error` class.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    getUser: builder.query({
      query: () => '/user',
      providesTags: (result) => ['User'],
    }),
  }),
  overrideExisting: true,
});

export const { useGetUserQuery } = api;

In the above example, we’ve updated the `error` property type to `undefined | Error`:

type GetUserQueryError = undefined | Error;

interface GetUserQueryResult {
  data: UserData;
  error: GetUserQueryError;
  isLoading: boolean;
}

Step 3: Use Optional Chaining (?.) or the Nullish Coalescing Operator (??)

Now that we’ve updated the type for the `error` property, we need to access it safely. We can do this using optional chaining (?.) or the nullish coalescing operator (??).

const { data, error } = useGetUserQuery();

if (error) {
  // handle error
  console.error(error);
} else {
  // render data
  console.log(data);
}

In the above example, we’re using the optional chaining operator (?.) to access the `error` property safely. If `error` is `undefined`, the expression will return `undefined` instead of throwing an error.

Alternative Solution: Use the `error` Property with a Default Value

If you’re not a fan of optional chaining or the nullish coalescing operator, you can use a default value for the `error` property.

const { data, error = undefined } = useGetUserQuery();

if (error) {
  // handle error
  console.error(error);
} else {
  // render data
  console.log(data);
}

In this example, we’re using a default value of `undefined` for the `error` property. This way, even if the `error` property is not present, the expression will return `undefined` instead of throwing an error.

Conclusion

There you have it! With these simple steps, you should be able to fix the “Property ‘error’ does not exist on type ‘{}'” error in RTK Query. Remember to update your RTK Query version, use the correct type for the `error` property, and access it safely using optional chaining or the nullish coalescing operator.

If you’re still experiencing issues or have further questions, don’t hesitate to reach out. Happy coding!

RTK Query Version	TypeScript Version
1.6.0	4.3.5

Note: The above solution has been tested with RTK Query version 1.6.0 and TypeScript version 4.3.5. Your mileage may vary depending on the versions you’re using.

FAQs

• What is the difference between optional chaining and the nullish coalescing operator?

  Optional chaining (?.) allows you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid. The nullish coalescing operator (??) returns the first operand if it’s not null or undefined, and the second operand if the first operand is null or undefined.

• Why does RTK Query return an empty object `{}` when there’s no error?

  RTK Query returns an empty object `{}` when there’s no error to indicate that the request was successful. This allows you to easily access the `data` property without having to worry about error handling.

Resources

1. RTK Query Documentation
2. TypeScript 4.0 Release Notes – Optional Chaining
3. MDN Web Docs – Nullish Coalescing Operator

I hope this article has helped you resolve the “Property ‘error’ does not exist on type ‘{}'” error in RTK Query. If you have any further questions or need help with anything else, feel free to ask!

Frequently Asked Question

Get the answers you need to overcome the hurdle of “RTK Query: Middleware – Property ‘error’ does not exist on type ‘{}'” and take your development skills to the next level!