Redux Toolkit Query: Error: Argument of type 'string | undefined' is not assignable to parameter of type 'IGetSpaceQueryParams

Devstar34
March 14, 2023
397 views
0 votes
2 Answers

I am hoping to fix an error I am getting while calling my hook from RTK Query. I am making a simple GET request and sending it a string for an ID. However, something is off with the interfaces or the way I am making my query and receiving a type error. How can I fix this? I am not sure where the ‘unique symbol’ part is coming from as well.

Where I call the hook:

const { myId } = useSRZId();
const {
  data: space,
  isLoading: spaceLoading
} = useGetSpaceQuery(myId); // <---error here on myId

Argument of type 'string | undefined' is not assignable to parameter of type 'IGetSpaceQueryParams | unique symbol'.

Where I get the ID:

export const useSRZId = (): { myId?: string; } => {
  const myId = query.get(EQueryParam.SID) || undefined;
  return { myId };
};

My query:

getSpace: builder.query<IGetSpaceQueryResponse, IGetSpaceQueryParams>({
   query: ({ myeId }: IGetSpaceQueryParams) => ({
     url: `/spaces/${myId}`,
     method: 'GET'
   }),
}),

export interface IGetSpaceQueryParams {
  myId: string;
}

export interface IPutSpaceQueryParams {
  myId: string;
  space: Partial<ISpace>;
}

Answers

- Arcanus
- March 14, 2023 at 5:34 am
- 0 votes
0
```
const myId = query.get(EQueryParam.SID) || undefined;
```
The problem lies here, you’re setting myId as possibly undefined, when it’s type does not allow for that.

The myId type has to match the query param type.
Login or Signup to reply.

- LindaPaiste
- March 14, 2023 at 10:53 pm
- 0 votes
0
Your query says that the argument is an object which has a property myId.
```
export interface IGetSpaceQueryParams {
  myId: string;
}
```
But here, you are calling it with a string, not an object.
```
useGetSpaceQuery(myId);
```
If you want to pass the string directly as the argument, then you need to modify your query definition like so:
```
getSpace: builder.query<IGetSpaceQueryResponse, string>({
   query: (myId: string) => ({
     url: `/spaces/${myId}`,
     method: 'GET'
   }),
}),
```
You can handle cases where the myId variable might be undefined by skipping the query.
```
import { skipToken } from '@reduxjs/toolkit/query';
```
```
useGetSpaceQuery(myId || skipToken);
```
Login or Signup to reply.