URLSearchParams does not work
Unanswered
American black bear posted this in #help-forum
American black bearOP
I have an use-case for data fetching and I am trying to add some params.
it does not work... the url search params is always an empty object
export async function getTransactions({page, pageSize}: GetTransactionsRequest) {
const params = new URLSearchParams({
startDateTime: formatDate(new Date(new Date().setFullYear(new Date().getFullYear() - 1))),
endDateTime: formatDate(new Date()),
...(page && {
pageNum: String(page),
}),
...(pageSize && {
pageSize: String(pageSize),
}),
});
const {data: response} = await httpClient.get<GetTransactionsResponse>('/transactions/fetch', {
params,
});
return response;
}it does not work... the url search params is always an empty object
7 Replies
@American black bear I have an use-case for data fetching and I am trying to add some params.
js
export async function getTransactions({page, pageSize}: GetTransactionsRequest) {
const params = new URLSearchParams({
startDateTime: formatDate(new Date(new Date().setFullYear(new Date().getFullYear() - 1))),
endDateTime: formatDate(new Date()),
...(page && {
pageNum: String(page),
}),
...(pageSize && {
pageSize: String(pageSize),
}),
});
const {data: response} = await httpClient.get<GetTransactionsResponse>('/transactions/fetch', {
params,
});
return response;
}
it does not work... the url search params is always an empty object
can you share how you call the function? Also share some more context about your env and what this function does and why it's exists
American black bearOP
i'm using this use-case here:
export default async function TransactionsPage({searchParams, params}: PageProps) {
async function fetchTransactions() {
try {
return getTransactions({page: Number(searchParams?.page) || 1, pageSize: TRANSACTIONS_PER_PAGE});
} catch (err) {
logger.error({
message: '[Transactions] Failed to fetch transactions',
error: {
message: err.message,
stack: err.stack,
},
http: {
request_body: {
page: searchParams?.page,
perPage: TRANSACTIONS_PER_PAGE,
},
},
});
return null;
}
}
const transactions = await fetchTransactions();can you console.log() the searchParams when you share them as variables like this:
export default async function TransactionsPage({searchParams, params}: PageProps) {
async function fetchTransactions(searchParams: any) {
try {
console.log("searchParams: ", searchParams)
return getTransactions({page: Number(searchParams?.page) || 1, pageSize: TRANSACTIONS_PER_PAGE});
} catch (err) {
logger.error({
message: '[Transactions] Failed to fetch transactions',
error: {
message: err.message,
stack: err.stack,
},
http: {
request_body: {
page: searchParams?.page,
perPage: TRANSACTIONS_PER_PAGE,
},
},
});
return null;
}
}
const transactions = await fetchTransactions(searchParams);@American black bear?
American black bearOP
never mind mate
I realized that axios client does not need to create this url search params since there is already a field called params
xd