How can I dynamically create an REST api query string?

Question

development environment: I am using ReactJS, React Query, Recoil and TypeScript.
I ran into one problem when communicating with REST api. When I get a list through GET communication, I use a query string, but I'm not sure how to dynamically create the query string.
For example 'read?page=1&perPage=10&sorting=created' or 'read?page=1&perPage=20&text=candy&sorting=older' or It could also be 'read?text=snack&category=price'.
Parameter values are managed by Recoil, so I am making a query string by collecting only non-null values, but I am looking for a better way.

Thank you so much for sharing your knowledge!

Jae · Accepted Answer · 2022-07-29 05:27:45Z

2

Take a look at Template literals.

const pageNum = 3; // you can dynamically set these variables
const perPageNum = 10;
const queryString = `read?page=${pageNum}&perPage=${perPageNum}`;

answered Jul 29, 2022 at 5:27

Jae

5564 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yooo Over a year ago

Thanks for your answer. But I didn't want template literals. When creating a query string, I want to create something that can put a value if it exists and not put a key and value if it doesn't. For example, if the key text and category has a value, 'read?text=snack&category=food' Or, if only category has a value, you want to know how to make it like 'read?category=book'.

Jae · Accepted Answer · 2022-08-01 05:21:20Z

1

A declarative approach based on your comment,

const parameters = {
  pageNum: 3,
  perPageNum: 10,
  category: 'food',
  sorting: null,
};

const queryString = Object.entries(parameters)
  .filter(([_, value]) => value !== null) // [ [ 'pageNum', 3 ], [ 'perPageNum', 10 ], [ 'category', 'food' ] ]
  .map(([key, value]) => `${key}=${value}`) // [ 'pageNum=3', 'perPageNum=10', 'category=food' ]
  .join('&'); // 'pageNum=3&perPageNum=10&category=food'

If you can make an object only with non-nullable value, then you won't need a filter method chaining.

answered Aug 1, 2022 at 5:21

Jae

5564 silver badges17 bronze badges

Collectives™ on Stack Overflow

How can I dynamically create an REST api query string?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related