Pass data between components using URL about react-algoliasearch-helper

[alexkirsz]

Hey,

The documentation of the helper is incomplete on that point, I've updated it and the change should be soon reflected on the website.

In the meantime, you can check out the URL utility methods exposed on algoliasearchHelper.url:

import {url} from 'algoliasearch-helper';

document.location.search = `?${url.getQueryStringFromState(helper.getState())}`;
helper.setState(url.getStateFromQueryString(document.location.search.slice(1)));

[harshmaur]

Works great however using helper.getStateAsQueryString() gives me shortened version that only applies the required refinements and gives to me in the url.

Also using both your method as well as helper method has one issue.

helper on initialisation requires which facets and disjunctive facets on which refinements can be applied on. That gets lost and I get error.

[alexkirsz]

Works great however using helper.getStateAsQueryString() gives me shortened version that only applies the required refinements and gives to me in the url.

I'm not sure I understand what you mean.

helper on initialisation requires which facets and disjunctive facets on which refinements can be applied on. That gets lost and I get error.

You can use helper.setQueryParameters(url.getStateFromQueryString(document.location.search.slice(1))) in order to only override parts of the helper's state. setState replaces the whole state, while setQueryParameters only overrides the properties provided in its object argument.

[alexkirsz]

I have updated the doc in order to reflect the changes in our API, as well as to document the URL utility methods.

You should hopefully be able to find what you're looking for there :)

https://community.algolia.com/algoliasearch-helper-js/reference.html#url

[harshmaur]

Sorry for putting up everything.. I have around 120 Facet Filters Look at the very end for the applied Brand filter Micromax

This is what I get when I do url.getQueryStringFromState(helper.getState())

?q=&dF[0]=brand&dF[1]=ram&dF[10]=discount&dF[100]=displaysize&dF[101]=lenses&dF[102]=function_type&dF[103]=wash_method&dF[104]=energy_rating&dF[105]=number_of_ports&dF[106]=shape&dF[107]=control_type&dF[108]=stars&dF[109]=defrosting_type&dF[11]=battery_capacity&dF[110]=laptoptype&dF[111]=graphics&dF[112]=os&dF[113]=screentype&dF[114]=hdd&dF[115]=binding&dF[116]=pages&dF[117]=publisher&dF[118]=language&dF[119]=author&dF[12]=secondarycamera&dF[120]=publish_year&dF[13]=phone_type&dF[14]=features&dF[15]=battery&dF[16]=networktype&dF[17]=simtype&dF[18]=processor&dF[19]=color&dF[2]=operatingsystem&dF[20]=fabric&dF[21]=dial_color&dF[22]=dial_shape&dF[23]=type&dF[24]=strap_material&dF[25]=gender&dF[26]=strap_color&dF[27]=blouse&dF[28]=pattern&dF[29]=washcare&dF[3]=store_name&dF[30]=occasion&dF[31]=work&dF[32]=material&dF[33]=style&dF[34]=frame_color&dF[35]=frame_material&dF[36]=lens_color&dF[37]=lens_material&dF[38]=ideal_for&dF[39]=heat_setting&dF[4]=primarycamera&dF[40]=speed_setting&dF[41]=attachment_type&dF[42]=capacity&dF[43]=age_group&dF[44]=purification&dF[45]=compatible_mobiles&dF[46]=height&dF[47]=neck&dF[48]=sleeve&dF[49]=length&dF[5]=calling_facility&dF[50]=sole_material&dF[51]=upper_material&dF[52]=tip_shape&dF[53]=closure&dF[54]=fit&dF[55]=feature&dF[56]=trimming_range&dF[57]=blade_material&dF[58]=mic&dF[59]=wired_or_wireless&dF[6]=internalmemory&dF[60]=waist&dF[61]=battery_type&dF[62]=heat_up_time&dF[63]=maximum_temperature&dF[64]=burners&dF[65]=ignition_system&dF[66]=curler_size&dF[67]=classes&dF[68]=control&dF[69]=connector&dF[7]=connectivity&dF[70]=number_of_cells&dF[71]=compatible&dF[72]=power&dF[73]=power_consumption&dF[74]=speed&dF[75]=interface&dF[76]=size&dF[77]=screen_type&dF[78]=screen_size&dF[79]=resolution&dF[8]=screensize&dF[80]=diameter&dF[81]=suction_capacity&dF[82]=filter_type&dF[83]=lamps&dF[84]=rods&dF[85]=powerconsumption&dF[86]=max_magnification&dF[87]=eye_relief&dF[88]=view_angle&dF[89]=max_apperture&dF[9]=processor_speed&dF[90]=filter_size&dF[91]=zoom_prime&dF[92]=lens_format&dF[93]=focal_length&dF[94]=lens_mount&dF[95]=blades&dF[96]=catching_points&dF[97]=megapixel&dF[98]=opticalzoom&dF[99]=sensor&f[0]=category_slug&f[1]=brand_slug&f[2]=slug&f[3]=instock&idx=fashiontest&p=0&dFR[brand][0]=MICROMAX&fR[brand_slug][0]=&fR[category_slug][0]=mobiles&fR[instock][0]=1

This is what I get when I do helper.getStateAsQueryString() (I found that you have removed this method from the docs in the latest commit.)

?q=&dFR[brand][0]=MICROMAX&fR[brand_slug][0]=&fR[category_slug][0]=mobiles&fR[instock][0]=1

The latter is the striped down version of the previous one it seems with only the required applied filters.

Also adding setQueryParameter (you have a typo...) seems to work and not giving me any errors but I need to check if it is really applying the parameters or not as my preliminary observation shows that it is not doing it, I need to check my react code though.

[alexkirsz]

This is what I get when I do helper.getStateAsQueryString() (I found that you have removed this method from the docs in the latest commit.)

We've deprecated getStateAsQueryString in favor of using the URL utility methods directly. It is still available on the helper, but we don't recommend using it anymore.

url.getQueryStringFromState does indeed serialize every single property from the provided helper's state. In order to get the same behavior as getStateAsQueryString, you should first filter out unwanted properties from the state.

For instance (and this is what getStateAsQueryString does under the hood):

const partialState = helper.getState(['query', 'attribute:*']);
const qs = url.getQueryStringFromState(partialState);

Also adding setQueryParameter (you have a typo...) seems to work and not giving me any errors but I need to check if it is really applying the parameters or not as my preliminary observation shows that it is not doing it, I need to check my react code though.

There are two methods:

• setQueryParameter(param, value): sets a single query parameter's value.
• setQueryParameters({[param]: value}): merges the provider partial state into the helper's state. This is probably the method you're looking for.

[harshmaur]

Great! The parameters are now filtered. However when I use setQueryParameters on helper.

I get this on my terminal

Uncaught TypeError: helper.setQueryParameters is not a function

Do I need to update the library? I see that I am using the latest 2.12.0 already.

[alexkirsz]

My bad! You are correct, setQueryParameters is not defined on the helper. It is however defined on the helper's state, which is a SearchParameter instance.

const partialState = url.getStateFromQueryString(document.location.search.slice(1));
const state = helper.getState();
const updatedState = state.setQueryParameters(partialState);
helper.setState(updatedState);

Let me know if that works for you, and I'll add a better usage example to the helper's cheatsheet!

[harshmaur]

Everything works great now!! Thanks for the awesome support!