Let's say we have an api function

export const getTheResults = async (params) => {
  const response = await axios.get(
    /api/v1/example.json?${stringify(params)}
  );
  return response.data;
};

the param is an object mentioned below , and we are stringifying it before sending the request to backend. Note: we are using stringify from qs npm package. const params = { key1: "value1", key2: "value2", key3: ["value3", "value4"], } the stringified output will be - > key1=value1&key2=value2&key_3%5B0%5D=value3&key_3%5B1%5D=value4 i.e key1=value1&key2=value2&key_3[0]=value3&key_3[1]=value4 but backend is expecting to receive it without the index values i.e key1=value1&key2=value2&key_3[]=value3&key_3[]=value4 So in order to send the parameters like that , we can just pass a stringify option called arrayFormat: "brackets"

eg: export const getTheResults = async (params) => {
  const response = await axios.get(
    /api/v1/example.json?${stringify(params, {arrayFormat: "brackets"})}
  );
  return response.data;
};

When using Rails strong parameters feature to permit certain parameters in controller and if any specific param has array values, we need to permit it as an array explicitly

Eg:
Request: /api/v1/calendar.json?date_from=&date_to=&hotel_id[]=1&hotel_id[]=2

def permit_params
  params.permit(:date_from, :date_to, hotel_id: []) # hotel_id: [] is important
end

In order to disable pager in postgresql, just use this command \pset pager off. This command is useful for seeing data from tables with huge jsonb data

JSON serialization in API responses omits fields with undefined value to follow the JSON specification. According to the JSON standard, properties with undefined values are not allowed in JSON objects, these are the allowed JSON values: object, array, number, string, true, false, or null.

We need to be mindful while handling the missing data. On the backend, use null or defaults for missing data. On the frontend, ensure data is present before accessing it.

Image Sprites

• Technique to reduce server requests for loading multiple images. • Combine several small images into a single, larger image called a sprite sheet. • Instead of loading multiple individual images separately, we can load a single sprite sheet. • We can refer to individual images within the sprite sheet using CSS background positioning.

// let's say we want to show logos of our client

.logo {
  background-image: url('client-logos-sprite.png');
  background-repeat: no-repeat;
}

.client1 {
  background-position: 0 0;
}

.client2 {
  background-position: -100px 0;
}

How to fetch and test those API endpoints which is accessible after login into the applications.

1. Launch the browser navigate to the login page using playwright
2. Enter the login credentials and submit the form to login.
3. After successful login, use playwright API to access the API endpoints.
4. Make API requests and assert the response to validate the functionality Example of fetching API after login :

// implementation of login test

const apiEndpointURL = "https://example.com/api/endpoint";
const apiResponse = await page.evaluate(async (url) => {
      const response = await fetch(url);
      return await response.json()
}, apiEndpointURL)

console.log(apiResponse)

Thanks

Monkey patching in Ruby is dynamic modification of class. It means overwriting existing methods at runtime eg:

class String
  def reverse
    'Reverse op blocked'
  end
end

'Hello'.reverse
>> 'Reverse op blocked'