TS2559: Type '(params: object) => string' has no properties in common with type 'ParamsSerializerOptions'.

[dolong2110]

Describe the bug

Here is my code

import axios from 'axios'
import qs from 'qs'
import config from '../config'

interface IURL {
  pk: string | number,
  action?: string,
  params?: object,
}

interface IRequest<T> extends IURL {
  data?: Partial<T>,
}

const paramsSerializer = (params: object) => qs.stringify(params, { arrayFormat: "repeat" });

export default <T>(resource: string, namespace: string | undefined) => {
  /**
   *
   * @param namespace: could contains api version, user's role, module name, or all of them.
   *                   E.g: /admin/core/portfolio, /v2/admin/core/portfolio, /pm/core/portfolio, /v2/pm/core/portfolio
   * @param resource: the resource.
   */

  let { API_BASE_URL: baseURL } = config;
  while (baseURL.endsWith('/')) baseURL = baseURL.slice(0, -1);

  const prefix = namespace === undefined ? `${baseURL}/${resource}` : `${baseURL}/${namespace}/${resource}`;

  const getURL = ({ pk, action }: Partial<IURL>) => {
    let url = prefix;
    if (pk !== undefined) {
      url = `${url}/${pk}`;
    }
    if (action !== undefined) {
      url = `${url}/${action}`;
    }
    console.log(url);
    return `${url}/`;
  };

  const retrieve = ({ pk, params }: IRequest<T>) => {
    const url = getURL({ pk });
    return axios.get(url, { params, paramsSerializer });
  };

  const create = ({ data, params }: Partial<IRequest<T>>) => {
    const url = getURL({});
    return axios.post(url, { ...data }, { params, paramsSerializer });
  };

  const list = ({ params }: Partial<IRequest<T>>) => {
    const url = getURL({});
    return axios.get(url, { params, paramsSerializer });
  };

  const update = ({ pk, data, params }: IRequest<T>) => {
    const url = getURL({ pk });
    return axios.patch(url, { ...data }, { params, paramsSerializer });
  };

  const destroy = ({ pk, params }: IRequest<T>) => {
    const url = getURL({ pk });
    return axios.delete(url, { params, paramsSerializer });
  };

  const getDetailAction = ({ pk, action, params }: IRequest<T>) => {
    const url = getURL({ pk, action });
    return axios.get(url, { params, paramsSerializer });
  };

  const postDetailAction = ({ pk, action, data, params }: IRequest<T>) => {
    const url = getURL({ pk, action });
    return axios.post(url, { ...data }, { params, paramsSerializer });
  };

  const getListAction = ({ pk, action, params }: Partial<IRequest<T>>) => {
    const url = getURL({pk, action});
    return axios.get(url, { params, paramsSerializer });
  };

  const postListAction = ({ action, data, params }: Partial<IRequest<T>>) => {
    const url = getURL({action});
    return axios.post(url, { ...data }, { params, paramsSerializer } );
  };

  return {
    retrieve,
    list,
    update,
    destroy,
    create,
    getDetailAction,
    postDetailAction,
    getListAction,
    postListAction
  };
};

And it always display the error: "TS2559: Type '(params: object) => string' has no properties in common with type 'ParamsSerializerOptions'."

To Reproduce

No response

Code snippet

No response

Expected behavior

No response

Axios Version

No response

Adapter Version

No response

Browser

No response

Browser Version

No response

Node.js Version

No response

OS

No response

Additional Library Versions

No response

Additional context/Screenshots

No response

[matheusflds]

If you are using the latest version, the paramsSerializer type has changed (https://github.com/axios/axios#request-config) to:

  paramsSerializer: {
    encode?: (param: string): string => { /* Do custom ops here and return transformed string */ }, // custom encoder function; sends Key/Values in an iterative fashion
    serialize?: (params: Record<string, any>, options?: ParamsSerializerOptions ), // mimic pre 1.x behavior and send entire params object to a custom serializer func. Allows consumer to control how params are serialized.
    indexes: false // array indexes format (null - no brackets, false (default) - empty brackets, true - brackets with indexes)
  },

So, if you want to keep using the custom serialization I believe that you would have to do something like this:

    axios.get(url, { params, paramsSerializer: { serialize: paramsSerializer } });

[ghost]

See #5217 (comment)

[jasonsaayman]

Hi 👋

Please try the latest pre-release by running the following:

npm i axios@1.2.0-alpha.1

Please provide feedback in either the pinned issue or the discussion thread 🧵