Theo's Typesafe CultTTC
Theo's Typesafe Cult•11mo ago•
1 reply
cheesedie

Request url has trailing slash before query params depending on params order

Encountered a very strange issue, I am not sure if it is related to axios or something else so I'll try to find help here.

I am using a custom useQuery wrapper and custom axios instance for fetching data:
  const listUsers = usePaginatedQuery({
    queryKey: ['users'],
    queryFn: async (params) =>
      (
        await api.get<Page<UserData>>('/users', {
          params: {
            page: params.page,
            per_page: params.per_page,
          },
        })
      ).data,
  });

I encountered a strange bug where the request URL for this request will look like as follows: http://localhost:5050/users/?page=1&per_page=10

It adds a slash before the query params, which is a problem for me. However, if I switch the order of page: params.page and per_page: params.per_page, or just remove the per_page params, the trailing slash will then not appear.

I do not understand why the order of params is causing this, is there an explanation, is it a bug in axios library or could it be related to something else?

I am using Nextjs 15. I have also a middleware setup, but it is a very basic auth token validation middleware so I don't think this changes anything.
Was this page helpful?