Merge pull request #461 from kubb-project/449-support-for-refs-in-tan…

…stack-query-for-vue

449 support for refs in tanstack query for vue

docs/.vitepress/config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vitepress'
 import { createWriteStream } from 'node:fs'
 import { resolve } from 'node:path'
+
 import { SitemapStream } from 'sitemap'
+import { defineConfig } from 'vitepress'
 
 import { version } from '../../packages/core/package.json'
 

docs/.vitepress/theme/index.ts

@@ -1,8 +1,8 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import DefaultTheme from 'vitepress/theme'
-import { EnhanceAppContext } from 'vitepress/dist/client'
 import { inject } from '@vercel/analytics'
+import { EnhanceAppContext } from 'vitepress/dist/client'
+import DefaultTheme from 'vitepress/theme'
+import { h } from 'vue'
 
 import HomePage from './HomePage.vue'
 

e2e/package.json

@@ -34,7 +34,7 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/solid-query": "^4.36.1",
     "@tanstack/svelte-query": "^4.36.1",
-    "@tanstack/vue-query": "^4.36.1",
+    "@tanstack/vue-query": "^4.36.2",
     "@zodios/core": "^10.9.6",
     "axios": "^1.5.1",
     "msw": "^1.3.2",

e2e/src/client.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-import type { AxiosError, AxiosHeaders, AxiosResponse, AxiosRequestConfig } from 'axios'
+import type { AxiosError, AxiosHeaders, AxiosRequestConfig, AxiosResponse } from 'axios'
 
 declare const AXIOS_BASE: string
 declare const AXIOS_HEADERS: string

examples/advanced/package.json

@@ -38,7 +38,7 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/solid-query": "^4.36.1",
     "@tanstack/svelte-query": "^4.36.1",
-    "@tanstack/vue-query": "^4.36.1",
+    "@tanstack/vue-query": "^4.36.2",
     "@zodios/core": "^10.9.6",
     "axios": "^1.5.1",
     "msw": "^1.3.2",

examples/advanced/src/gen/clients/hooks/petController/useFindPetsByStatus.ts

@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPetsByStatus400 } from '../../../models/ts/petController/FindPetsByStatus'
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,

examples/advanced/src/gen/clients/hooks/petController/useFindPetsByTags.ts

@@ -9,7 +9,7 @@ import type {
   FindPetsByTags400,
 } from '../../../models/ts/petController/FindPetsByTags'
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   headers: FindPetsByTagsHeaderParams,

examples/advanced/src/gen/clients/hooks/petController/useGetPetById.ts

@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400, GetPetById404 } from '../../../models/ts/petController/GetPetById'
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400 | GetPetById404>(
   petId: GetPetByIdPathParams['petId'],

examples/advanced/src/gen/clients/hooks/userController/useGetUserByName.ts

@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { GetUserByNameQueryResponse, GetUserByNamePathParams, GetUserByName400, GetUserByName404 } from '../../../models/ts/userController/GetUserByName'
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400 | GetUserByName404>(
   username: GetUserByNamePathParams['username'],

examples/advanced/src/gen/clients/hooks/userController/useLoginUser.ts

@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { LoginUserQueryResponse, LoginUserQueryParams, LoginUser400 } from '../../../models/ts/userController/LoginUser'
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: LoginUserQueryParams) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
   params?: LoginUserQueryParams,

examples/advanced/src/gen/clients/hooks/userController/useLogoutUser.ts

@@ -4,7 +4,7 @@ import client from '../../../../client'
 import type { ResponseConfig } from '../../../../client'
 import type { LogoutUserQueryResponse } from '../../../models/ts/userController/LogoutUser'
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},

examples/react-query/package.json

@@ -28,6 +28,7 @@
     "@kubb/swagger-tanstack-query": "workspace:*",
     "@kubb/swagger-ts": "workspace:*",
     "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.36.1",
     "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/react-query/src/App.tsx

@@ -1,15 +1,21 @@
+import { useState } from 'react'
+import type { FindPetsByStatusQueryParamsStatus } from './gen'
 import { useFindPetsByStatusHook } from './gen'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const queryClient = new QueryClient()
 
 function Pets(): JSX.Element {
-  const { data: pets } = useFindPetsByStatusHook({ status: 'available' })
+  const [status, setStatus] = useState<FindPetsByStatusQueryParamsStatus>('available')
+  const { data: pets } = useFindPetsByStatusHook({ status })
 
   return (
     <>
-      <h1>Pets:</h1>
+      <h1>Pets: {status}</h1>
       <ul>{pets?.map((pet) => <li key={pet.id}>{pet.name}</li>)}</ul>
+      <button onClick={() => setStatus('available')}>Available</button>
+      <button onClick={() => setStatus('pending')}>Pending</button>
     </>
   )
 }
@@ -18,6 +24,7 @@ export function App(): JSX.Element {
   return (
     <QueryClientProvider client={queryClient}>
       <Pets />
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   )
 }

examples/react-query/src/gen/hooks/useFindPetsByStatusHook.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPetsByStatus400 } from '../models/FindPetsByStatus'
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,

examples/react-query/src/gen/hooks/useFindPetsByTagsHook.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByTagsQueryResponse, FindPetsByTagsQueryParams, FindPetsByTags400 } from '../models/FindPetsByTags'
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   params?: FindPetsByTagsQueryParams,

examples/react-query/src/gen/hooks/useGetInventoryHook.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { GetInventoryQueryResponse } from '../models/GetInventory'
 
-export const getInventoryQueryKey = () => [`/store/inventory`] as const
+export const getInventoryQueryKey = () => [{ url: `/store/inventory` }] as const
 
 export function getInventoryQueryOptions<TData = GetInventoryQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},

examples/react-query/src/gen/hooks/useGetOrderByIdHook.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { GetOrderByIdQueryResponse, GetOrderByIdPathParams, GetOrderById400 } from '../models/GetOrderById'
 
-export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [`/store/order/${orderId}`] as const
+export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [{ url: `/store/order/${orderId}`, params: { orderId: orderId } }] as const
 
 export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TError = GetOrderById400>(
   orderId: GetOrderByIdPathParams['orderId'],

examples/react-query/src/gen/hooks/useGetPetByIdHook.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400 } from '../models/GetPetById'
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400>(
   petId: GetPetByIdPathParams['petId'],

examples/react-query/src/gen/hooks/useGetUserByNameHook.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { GetUserByNameQueryResponse, GetUserByNamePathParams, GetUserByName400 } from '../models/GetUserByName'
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400>(
   username: GetUserByNamePathParams['username'],

examples/react-query/src/gen/hooks/useLoginUserHook.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { LoginUserQueryResponse, LoginUserQueryParams, LoginUser400 } from '../models/LoginUser'
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: LoginUserQueryParams) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
   params?: LoginUserQueryParams,

examples/react-query/src/gen/hooks/useLogoutUserHook.ts

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import client from '@kubb/swagger-client/client'
 import type { LogoutUserQueryResponse } from '../models/LogoutUser'
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},

examples/react-query/src/mocks/index.ts

@@ -1,7 +1,18 @@
 import { setupWorker, rest } from 'msw'
 
 export const worker = setupWorker(
-  rest.get('/pets', (req, res, ctx) => {
+  rest.get('/pet/findByStatus', (req, res, ctx) => {
+    if (req.url.searchParams.get('status') === 'pending') {
+      return res(
+        ctx.json([
+          {
+            id: '1234',
+            name: 'Lily(pending)',
+          },
+        ]),
+      )
+    }
+
     return res(
       ctx.json([
         {

examples/simple-single/src/gen/hooks.ts

@@ -125,7 +125,7 @@ export function useAddPet<TData = AddPetMutationResponse, TError = AddPet405, TV
   })
 }
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,
@@ -173,7 +173,7 @@ export function useFindPetsByStatus<TData = FindPetsByStatusQueryResponse, TErro
   return query
 }
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   params?: FindPetsByTagsQueryParams,
@@ -221,7 +221,7 @@ export function useFindPetsByTags<TData = FindPetsByTagsQueryResponse, TError =
   return query
 }
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400 | GetPetById404>(
   petId: GetPetByIdPathParams['petId'],
@@ -358,7 +358,7 @@ export function useUploadFile<TData = UploadFileMutationResponse, TError = unkno
   })
 }
 
-export const getInventoryQueryKey = () => [`/store/inventory`] as const
+export const getInventoryQueryKey = () => [{ url: `/store/inventory` }] as const
 
 export function getInventoryQueryOptions<TData = GetInventoryQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
@@ -459,7 +459,7 @@ export function usePlaceOrderPatch<TData = PlaceOrderPatchMutationResponse, TErr
   })
 }
 
-export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [`/store/order/${orderId}`] as const
+export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [{ url: `/store/order/${orderId}`, params: { orderId: orderId } }] as const
 
 export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TError = GetOrderById400 | GetOrderById404>(
   orderId: GetOrderByIdPathParams['orderId'],
@@ -594,7 +594,7 @@ export function useCreateUsersWithListInput<
   })
 }
 
-export const loginUserQueryKey = (params?: LoginUserQueryParams) => [`/user/login`, ...(params ? [params] : [])] as const
+export const loginUserQueryKey = (params?: LoginUserQueryParams) => [{ url: `/user/login` }, ...(params ? [params] : [])] as const
 
 export function loginUserQueryOptions<TData = LoginUserQueryResponse, TError = LoginUser400>(
   params?: LoginUserQueryParams,
@@ -641,7 +641,7 @@ export function useLoginUser<TData = LoginUserQueryResponse, TError = LoginUser4
   return query
 }
 
-export const logoutUserQueryKey = () => [`/user/logout`] as const
+export const logoutUserQueryKey = () => [{ url: `/user/logout` }] as const
 
 export function logoutUserQueryOptions<TData = LogoutUserQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},
@@ -685,7 +685,7 @@ export function useLogoutUser<TData = LogoutUserQueryResponse, TError = unknown>
   return query
 }
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400 | GetUserByName404>(
   username: GetUserByNamePathParams['username'],

examples/solid-query/package.json

@@ -32,7 +32,6 @@
     "tsup": "^7.2.0"
   },
   "devDependencies": {
-    "@kubb/ts-config": "workspace:*",
     "typescript": "^5.2.2"
   },
   "packageManager": "[email protected]",

examples/solid-query/src/gen/hooks/findPetsByStatusQuery.ts

@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPetsByStatus400 } from '../models/FindPetsByStatus'
 
-export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [`/pet/findByStatus`, ...(params ? [params] : [])] as const
+export const findPetsByStatusQueryKey = (params?: FindPetsByStatusQueryParams) => [{ url: `/pet/findByStatus` }, ...(params ? [params] : [])] as const
 
 export function findPetsByStatusQueryOptions<TData = FindPetsByStatusQueryResponse, TError = FindPetsByStatus400>(
   params?: FindPetsByStatusQueryParams,

examples/solid-query/src/gen/hooks/findPetsByTagsQuery.ts

@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { FindPetsByTagsQueryResponse, FindPetsByTagsQueryParams, FindPetsByTags400 } from '../models/FindPetsByTags'
 
-export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [`/pet/findByTags`, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: `/pet/findByTags` }, ...(params ? [params] : [])] as const
 
 export function findPetsByTagsQueryOptions<TData = FindPetsByTagsQueryResponse, TError = FindPetsByTags400>(
   params?: FindPetsByTagsQueryParams,

examples/solid-query/src/gen/hooks/getInventoryQuery.ts

@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { GetInventoryQueryResponse } from '../models/GetInventory'
 
-export const getInventoryQueryKey = () => [`/store/inventory`] as const
+export const getInventoryQueryKey = () => [{ url: `/store/inventory` }] as const
 
 export function getInventoryQueryOptions<TData = GetInventoryQueryResponse, TError = unknown>(
   options: Partial<Parameters<typeof client>[0]> = {},

examples/solid-query/src/gen/hooks/getOrderByIdQuery.ts

@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { GetOrderByIdQueryResponse, GetOrderByIdPathParams, GetOrderById400 } from '../models/GetOrderById'
 
-export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [`/store/order/${orderId}`] as const
+export const getOrderByIdQueryKey = (orderId: GetOrderByIdPathParams['orderId']) => [{ url: `/store/order/${orderId}`, params: { orderId: orderId } }] as const
 
 export function getOrderByIdQueryOptions<TData = GetOrderByIdQueryResponse, TError = GetOrderById400>(
   orderId: GetOrderByIdPathParams['orderId'],

examples/solid-query/src/gen/hooks/getPetByIdQuery.ts

@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400 } from '../models/GetPetById'
 
-export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [`/pet/${petId}`] as const
+export const getPetByIdQueryKey = (petId: GetPetByIdPathParams['petId']) => [{ url: `/pet/${petId}`, params: { petId: petId } }] as const
 
 export function getPetByIdQueryOptions<TData = GetPetByIdQueryResponse, TError = GetPetById400>(
   petId: GetPetByIdPathParams['petId'],

examples/solid-query/src/gen/hooks/getUserByNameQuery.ts

@@ -3,7 +3,7 @@ import { createQuery } from '@tanstack/solid-query'
 import client from '@kubb/swagger-client/client'
 import type { GetUserByNameQueryResponse, GetUserByNamePathParams, GetUserByName400 } from '../models/GetUserByName'
 
-export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [`/user/${username}`] as const
+export const getUserByNameQueryKey = (username: GetUserByNamePathParams['username']) => [{ url: `/user/${username}`, params: { username: username } }] as const
 
 export function getUserByNameQueryOptions<TData = GetUserByNameQueryResponse, TError = GetUserByName400>(
   username: GetUserByNamePathParams['username'],