Why the req.url.searchParams parameters object is empty when I test two get requests using Mock Service Worker?

[E01T]

Environment

Name	Version
msw	0.35.0
node	12.18.1
OS	Windows 10 pro

Request handlers

// Example of declaration. Provide your code here.
import { setupServer } from 'msw/node'
import { rest } from 'msw'

const server = setupServer(
  // https://api.github.com/search/users?q=${userName}&type=users&per_page=10&page=${pageNo}`,
  // https://api.github.com/users/${user}
  rest.get('https://api.github.com/search/users', async (req, res, ctx) => {
     const query = req.url.searchParams
    // console.log('query', query) // empty {}
    // console.log('rest req', req) // empty {}
    // console.log('rest req.params', req.params) // empty {}
    console.log('rest req.url.searchParams', req.url.searchParams) // empty {}
    const users = search_data[0]
    return res(ctx.json(users))
  }),

  rest.get(`https://api.github.com/users/:user`, async (req, res, ctx) => {
    // console.log('rest req.params.user', req.params.user) // it works fine
    return res(
      ctx.json(
        users_data[count].users.find((user) => user.login === req.params.user)
      )
    )
  })
)

beforeAll(() => server.listen())
afterAll(() => server.close())

Actual request

// top of page i define two fn
const getUser = (user: string, signal: AbortSignal) =>
  fetch(`https://api.github.com/users/${user}`, {
    headers: {
      Accept: 'application/vnd.github.v3+json',
    },
    signal,
  }).then((response) => response.json())

const searchGithubApi = (
  userName: string,
  pageNo: number = 1,
  signal: AbortSignal
) => {
  return fetch(
    `https://api.github.com/search/users?q=${userName}&type=users&per_page=10&page=${pageNo}`,
    {
      headers: {
        Accept: 'application/vnd.github.v3+json',
      },
      signal,
    }
  ).then((res) => res.json())
}

// and then in useEffect hook i call the above defined functions
React.useEffect(() => {
    if (userInput === '') return // exit if userInput is empty (initial state)

    const abortCtrl = new AbortController()
    const signal = abortCtrl.signal

    searchGithubApi(userInput, pageNo, signal).then(
      (users) => {
        const total_count: number = users.total_count

        if (total_count === 0) {
          setOutputMessage('No users found')
          return // exit
        }

        const userPromises = users.items.map((user: user_type) => {
          return getUser(user.login, signal)
        })

        Promise.all<user_type>(userPromises).then((users) => {
          setUsers({ items: users, total_count: total_count })
          topRef?.current?.scrollIntoView({ behavior: 'smooth' })
        })
      },
      (err) => console.error(err)
    )

    return () => abortCtrl.abort()
  }, [userInput, pageNo])

Current behavior

In the first handler I am expecting to get the query parameters in the request object, like the userName, but the returned object is empty. What am I doing wrong?
The second handler works fine.

Expected behavior

I am expecting to get all the query parameters in the request object from the api endpoint below (everything after question mark).
https://api.github.com/search/users?q=${userName}&type=users&per_page=10&page=${pageNo}

[kettanaito]

Hey, @E01T.

First thing to clarify, your example feature two distinct things:

• Query parameters: /search/users?a=1&b=2 ("a" and "b");
• Path parameters: /users/:id ("id").'

Path parameters are exposed under req.params object and are available based on the parameter name you give after the semicolon:

rest.get('/users/:id', (req, res, ctx) => {
  req.params.id // where "id" is taken from ":id"
})

Query parameters are exposed under a URLSearchParams instance, which is not an object. To access a query paramete you must call the .get() method on the said instance and provide it with the query parameter name:

rest.get('https://api.github.com/search/users', async (req, res, ctx) => {
  // given "/search/users?q=E01T" 
  req.url.searchParams.get('q') // "E01T"
})

Note that logging out the URLSearchParams instance produces an empty object, as you're trying to log out a class instance.

console.log(req.url.searchParams) // {}
console.log(req.url.searchParams.get('q')) // "E01T"

[E01T]

Perfect. Thank you very much. It would be a good idea to clarify this at the documentation also.

[kettanaito]

This is explained in the Query parameters recipe. It mentions both URLSearchParams with the link to read about it, as well as features the usage examples to access query parameters.