Question 73242 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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>;
}
Tags:

2

Answers


  1. 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.
  2. 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.
Please signup or login to give your own answer.

Back To Top
Search