Query Parameters

Query parameters are key-value pairs added to an API URL after a question mark.

https://example.com/api/students?course=react

Here, course=react is a query parameter.

The basic syntax of a query parameter is:

?key=value

Example:

https://example.com/api/students?course=react

The question mark starts the query string.

The first query parameter is introduced using a question mark ?.

/api/students?course=react

Everything after the question mark is part of the query string.

A query parameter contains a key and a value separated by an equals sign =.

?course=react

• course is the key.
• react is the value.

A search parameter can be used to search for a specific value.

https://example.com/api/students?search=rahul

The API can use the search value to find matching students.

Query parameters are commonly used to filter API results.

https://example.com/api/students?course=react

The API can return only students belonging to the specified course.

Multiple query parameters can be used in the same URL.

https://example.com/api/students
?course=react&city=patna

The first parameter starts with ? and additional parameters are separated using &.

The ampersand & separates multiple query parameters.

?course=react&city=patna&status=active

This URL contains three query parameters.

A city parameter can be used to filter records by city.

https://example.com/api/students?city=patna

The API can use this value when selecting matching records.

A status parameter can be used to request records with a particular status.

https://example.com/api/students?status=active

The server can use the value active to filter the response.

Products or courses can be filtered using a category parameter.

https://example.com/api/products?category=mobile

The API can return products belonging to the requested category.

Query parameters are especially common with GET requests because they allow the client to specify which data it wants.

GET /api/students?course=react

The server reads the query parameter and generates an appropriate response.

React Native can include query parameters directly in a Fetch URL.

const response = await fetch(
    "https://example.com/api/students?course=react"
);

const data = await response.json();

console.log(data);

Query parameters can be created dynamically using JavaScript variables.

const course = "react";

const url =
    "https://example.com/api/students?course="
    + course;

console.log(url);

Template literals make dynamic query URLs easier to create.

const course = "react";

const url =
    `https://example.com/api/students?course=${course}`;

console.log(url);

JavaScript provides URLSearchParams for creating query parameters in a structured way.

const params = new URLSearchParams({
    course: "react",
    city: "patna"
});

const url =
    "https://example.com/api/students?"
    + params.toString();

console.log(url);

The previous example produces a query string similar to:

course=react&city=patna

The complete URL becomes:

https://example.com/api/students?course=react&city=patna

Axios provides a convenient params option for query parameters.

const response = await axios.get(
    "https://example.com/api/students",
    {
        params: {
            course: "react",
            city: "patna"
        }
    }
);

console.log(response.data);

A search screen in a React Native application can send the entered search text to the API.

const search = "rahul";

const response = await fetch(
    `https://example.com/api/students?search=${search}`
);

const data = await response.json();

The API can then return matching records.

Query parameters can also control which page of data should be returned.

https://example.com/api/students?page=1&limit=10

• page=1 specifies the page.
• limit=10 specifies the number of records.

An API can use query parameters to specify a sorting order.

https://example.com/api/students?sort=name

Another example can specify descending order:

https://example.com/api/students?sort=-name

The exact sorting syntax depends on the API design.

PHP can read query parameters from the $_GET superglobal.

For this URL:

https://example.com/api/students?course=react

PHP can read the value using:

$course = $_GET['course'] ?? '';

The variable $course will contain the requested value.

PHP can read multiple query parameters from the same request.

$course = $_GET['course'] ?? '';
$city = $_GET['city'] ?? '';
$status = $_GET['status'] ?? '';

These values can then be used when building the API response or database query.

A PHP REST API can use query parameter values to filter database records.

$course = $_GET['course'] ?? '';

$sql = "SELECT * FROM students
        WHERE course = :course";

$stmt = $pdo->prepare($sql);

$stmt->execute([
    'course' => $course
]);

Prepared statements should be used when values are sent to SQL queries.

Query parameter values may contain spaces or special characters. These values need to be encoded correctly when constructing URLs.

const search = "React Native";

const url =
    `https://example.com/api/students?search=${encodeURIComponent(search)}`;

Using URL encoding helps ensure that special characters are represented correctly.

Postman provides a convenient way to test query parameters.

1. Create or select a GET request.
2. Enter the API URL.
3. Open the Params section.
4. Enter the parameter key.
5. Enter the parameter value.
6. Click Send.

Postman will add the query parameters to the request URL.

• Forgetting the question mark before the first parameter.
• Using a comma instead of an ampersand.
• Using the wrong parameter name.
• Forgetting to encode special characters.
• Sending an empty or invalid value.
• Assuming every API supports the same parameter names.
• Not validating query parameter values on the server.
• Building unsafe SQL queries directly from user input.

React Native
      ↓
Search / Filter Input
      ↓
Query Parameters
      ↓
API URL
      ↓
GET Request
      ↓
PHP REST API
      ↓
Read $_GET Values
      ↓
Filter Database
      ↓
JSON Response
      ↓
React Native

Query parameters allow the mobile application to tell the API which data it wants.

Suppose a React Native application wants active React students from Patna.

https://example.com/api/students
?course=react&city=patna&status=active

The API receives three query parameters:

• course = react
• city = patna
• status = active

The PHP API can validate these values and use them to retrieve the required records.

Query parameters are an important part of REST API development. They allow a client application to send additional information to the server without changing the main resource endpoint.

Base URL:
https://example.com/api/

Endpoint:
students

Query Parameters:
?course=react&city=patna

Complete URL:
https://example.com/api/students
?course=react&city=patna

In React Native applications, query parameters are especially useful for search, filtering, sorting, and pagination.