TTC
Theo's Typesafe Cult•2mo ago
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,
  });
  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.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?