From 5bd48a5dc2ca6c2488194ab6a8b53dca07aa9e4e Mon Sep 17 00:00:00 2001 From: Dhaya <154633+dhayab@users.noreply.github.com> Date: Mon, 15 May 2023 07:58:01 +0200 Subject: [PATCH] chore(docs): update algolia guide (#38085) --- docs/docs/adding-search-with-algolia.md | 93 +++++++++++----------- docs/docs/images/algolia-final-search.png | Bin 93445 -> 124544 bytes 2 files changed, 48 insertions(+), 45 deletions(-) diff --git a/docs/docs/adding-search-with-algolia.md b/docs/docs/adding-search-with-algolia.md index 95ed02cf17f26..24f86d2ffea49 100644 --- a/docs/docs/adding-search-with-algolia.md +++ b/docs/docs/adding-search-with-algolia.md @@ -18,7 +18,7 @@ There are two stages to providing search functionality: indexing your pages and The [Gatsby Algolia plugin](https://github.com/algolia/gatsby-plugin-algolia) handles the indexing. It sends your pages to Algolia for indexing every time you run `gatsby build`. You use GraphQL to customize which pages and what information to index. -To build the user interface for searching, this guide will use [React InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/getting-started/react/), which is a library provided by Algolia with ready-made React components. This is the quickest way to get up and running, but you could also build your own custom user interface. +To build the user interface for searching, this guide will use [React InstantSearch Hooks](https://www.algolia.com/doc/guides/building-search-ui/getting-started/react-hooks/), which is a library provided by Algolia with ready-made React components. This is the quickest way to get up and running, but you could also build your own custom user interface. > Note: If you want to build a search for technical documentation, Algolia provides a product called [DocSearch](https://docsearch.algolia.com/) that simplifies the process further and eliminates the need for manual indexing. This is the preferred approach for documentation sites. @@ -189,7 +189,7 @@ Now that there is data in the index, it is time to build the user interface for The guide will use the following frameworks: -- [React InstantSearch](https://community.algolia.com/react-instantsearch), a component library provided by Algolia for easily building search interfaces. +- [React InstantSearch Hooks](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react-hooks/), a component library provided by Algolia for easily building search interfaces. - [Algolia Search](https://www.npmjs.com/package/algoliasearch) provides the API client for calling Algolia. - [Styled Components](https://styled-components.com) for embedding the CSS in the code, integrated using the [Gatsby styled component plugin](/plugins/gatsby-plugin-styled-components/). - [Styled Icons](https://styled-icons.js.org/) provides the magnifying glass icon for the search bar. @@ -199,7 +199,7 @@ Styled Components can also be replaced by any other CSS solution you prefer. Install these frameworks by running the following command: ```shell -npm install react-instantsearch-dom algoliasearch styled-components gatsby-plugin-styled-components @styled-icons/fa-solid +npm install react-instantsearch-hooks-web algoliasearch styled-components gatsby-plugin-styled-components @styled-icons/fa-solid ``` Add the `gatsby-plugin-styled-components` to your `gatsby-config`: @@ -218,63 +218,70 @@ The first step is to create the input field where the user enters the search que ```jsx:title=src/components/search/search-box.js import React from "react" -import { connectSearchBox } from "react-instantsearch-dom" +import { useSearchBox } from "react-instantsearch-hooks-web" import { Search as SearchIcon } from "@styled-icons/fa-solid" -export default connectSearchBox( - ({ refine, currentRefinement, className, onFocus }) => ( +const SearchBox = ({ className, onFocus, onChange }) => { + const { query, refine } = useSearchBox() + + return (
) -) +} + +export default SearchBox ``` -The component consists of an HTML form containing an input field and the magnifying glass icon. Most of the work is done by Algolia's [`connectSearchBox`](https://community.algolia.com/react-instantsearch/connectors/connectSearchBox.html) function. It exposes the current search string as `currentRefinement` and a function for changing it called `refine`. +The component consists of an HTML form containing an input field and the magnifying glass icon. Most of the work is done by Algolia's [`useSearchBox`](https://www.algolia.com/doc/api-reference/widgets/search-box/react-hooks/#hook) React hook. It exposes the current search string as `query` and a function for changing it called `refine`. ### Displaying search results That's all there is to entering the search query. Next, build a component for displaying search results: ```jsx:title=src/components/search/search-result.js +import React from "react" import { Link } from "gatsby" -import { default as React } from "react" import { - connectStateResults, Highlight, Hits, Index, Snippet, PoweredBy, -} from "react-instantsearch-dom" + useStats, +} from "react-instantsearch-hooks-web" -const HitCount = connectStateResults(({ searchResults }) => { - const hitCount = searchResults && searchResults.nbHits +const HitCount = () => { + const { nbHits } = useStats() - return hitCount > 0 ? ( + return nbHits > 0 ? (-NF=7^upp|I2q}jYG(wyURcj~jjPr+LG1n4 z&*yqG5mgTCnmM1_ICLyu66@&=|44DIfp;+$%Bk$;>XnD_)MO$vcnasK+|WU5?vNM%k= zjxilm1jhw`j7jakIRm@b!b(u(xSS_1f{zDLC5e32OA-#x za4e&M&cck3qq>r$m?gBHJi(M%4Z{IyCQ16VgtMadX4AiWU5*h$9Sza@$eI<}&U7GZ zT N!m!r*7JyIzkkw=z7&&MooET^ ziSA9Vrcz097JM!@v^+ahv|?yhsZVLKQpPlfG&7 zSV*G(=x|@Hqtt4cKZ*f$bPy+G-@T@3BHlmj{qN1Sw-SbH{V|{U_3P2;ySec?1m& zjg;^8;L0)7@nJNdrCge-fmwzxW^?N{zBS(>lx0WCimJp{hSXW+)3dQD6h%GXTb*d6 zT=6wl`@r#gY6@FvH
f2pe2tdo(Ro{8}mvc~=2 zb1tc-(s5ps+n?Z7iW9;nOJ6aG@1p5cH9}*;KX05eF*F>v8ZNV+?^_&o9B+>i$WKj8 zO;1mM&Xzd8D1nC?4@r|4kb(~$uqHhFJXAapUT! o$FbntS%#IaUJV|CYQh zxPPQw
XPh!+}<)Ihd=r7a{a!4;Zn zlhz2a;{!F7;ycKx&IH59?NL0^k7YIRA#_8 hyGU|*Kr1O!nubAZedE-3^qk@cJ ze|M^Uc%r<;K$T;@zrW)C)?y5l4Jh{T-zI(LgcqC=(Ek`nN?s1CmVJj@rVy}Jz;PS? zdtNS{dAylZ9PbmdpGl$)H? 2@w$y{TJ|HFc^sc&bSBt9UUCS zu1#;cnvSZSR-dC#C^gjkzrQb|r>{S b7&jN$ Ezqjyz;P!_N zyR4pKPz$*ATSR?itMGS8{-FY}MN!zLRs?*<7|CtPkg;Tgwu1YwoqQXhX0MkCroK9$4`(ClTujkr06AmG_)|Q`7}%i{NdgWEQ!9& zA5HyOs*%a7WHi^VQBaUl5fg6+-M`1gbnhP1t$R&kx1OjN?4JAQ(-UtNGF6dxPXz@? zKgC$ievr|U6r%5DSDECT%{W+Xq|HjN{xrahzw!mFoxbgPKZueE9Z5;!7uo~!{q-k_ z^9*+PYd6-nRyVh{HaFH*H`XH7#C_Ar{@&(wUoLr70SVv8@<61po11~$T}kwv?%ToE zvI8-bH<+oz2L@1fk*_-)p{ahBT>Eijd-{x)ljN&cA5jm#1TM=99#pytJG#$JuMJ=a zr+j+oBE6MVV`=}r_0L~~-PH6`T5nSaHY&&e_u3Di1|d~al8LFQb0exgVL9=4FFIw; zA^5VUGV7iYBOBYn=KNE!IxSnIo%@~wk@NP_gVAdH?YYgE$b5r3r` PbBCJ=S4!0pU$=sEUT~RNI%L(dX}Y#DIXfOeBWAyoF>xf(NJT_r zf8WV?{O$MsE!r{pe?K(k4uWv@sf>Vx5al@{+R%VTuEw733&D9GkuoWIYd^4xXr^wJ z3q(Z0N`6R0%IRdMJg-7qsC{pOGrc%|dU_@%CUPFj>X%!OyRNJRmv_d z;lqeD7prGbJ0y)KApi` n9 zXQXb*{2l6>69&&@aHpOsWTjXBnV3jUO8Wloo8j)c3K2Wh3TC%E-17GA#Hi870M$_< zsNc+p>$4e7!l>JEq_b$5bC1znkKI1qhV^k}j$&?HBPXXK{ a$Sj{}P zMg)AjAkrg0#qSPvc)E3GO3xhx+3eSw+hrU8+l^FRt)Dqb{(u`F6RlMW)Xy8QSae!b zFcr88`AU94w_7SWpk?B&a%#`oG?&-4Yu*0P`J0k@4L(u VeW#(`i>RgEP(kui1 z80bCoX8scbeW_eXk##4JiM}|Vy14Pe#@qkwMB6%bG;G|DQ)bY>6te#upBGu zYTam!r%g?|V;}NHiMmx_Tkl=L*Vm^8Q1IFyus|3ggSYVfg(uUVuoIU7@f|!=2Dr|T zaK%^Zuhm!4L9dC4iGe^E)Ojq<&dvhE18OldLw5c8b!zIkLB;p{0DD{0(xINm b$7js`?@frRlAjc|ogV*tBe*~{(}*-^B;B{oYV-#`TVJ1c8;U#{MjoA;gq z6n)^hRBbmC&=x*;S(+PvsW%(9koBL9120^-uzR>Yo~{_vmnh-={HO2iunrltee;2W z-__3R)}!dD<>iDU#MRlq+K$W>ak5X0qM}EDT;(GW6uogCIxa4DC z8d-JJZD=Z>Ly6y}hb~vqPtUx5{TjF%m7uM0a|naobX(NXkJOEh2g_m1YNjI c8Dm`*?;fJ)G!KhGU_{f7@9+6?Ti&Lal#XK;e$ zJmOx^0u>-JR)gw_%+A-D%!aiG0J<5LO|}SRZX~i&;t%uT*+fDw85x<+JZ2r~2_9KC zhQf!olTBR!itrl57XSb8P8Y( ;X&1Jb}dt=d)asERg0YMX4_#j5!d3!@7kM-;$$1e&%S#BPMRM+E8yASPnjU< zE<{-S+ZPl5R{{9)4s%un033r>p8noeoqyhwMDe%>jsc%O^%f2mk$8K1yE-|Iz!6S1 zhk9S39V@krOpyl7 h0fR9pw;l}?JE|~lCf@bSnFX?|1nh9OI~6YM;_NIXDVeg%plpVdlaUEJ z3qd$vKJM`ViNk<$VO*RK;ttTJ#z5N0xR%jT#6CeJ#UzPa>bK6$Wq{$LqP6ky22gov z1gl1>?e`~Vi=lDomcPzc;b(-MD7=dPlKuJf=dNVw`QcrDwBxwDBe1?JG{Q2)^+n5a zr-G5U2aR^urhwyF_GYL+fB`-~#Oo{?tj~&Mg6}{^%#T);OP*>b(8@Q!iu7l;>|huS z)pdHL18HQxM2omO019T&$~ypU!&1M;am+a#cq|+eptBmcFRWU5!uE4vetv$u4@zxZ zUBn}SfAor(wta?EiG+WB`1Vv*=nYoQ9LScwzP>f`W-|)t*o7y#_19KPPzrG@Q~u0q zX$tYeKRc|ucP@}Lek!FF8ZrI)D{*|AJSg7(0u&D<1jZZ)OUL`;#~X`omSJ?#0q@Qd zdaTr+W2So)oze-Ez;aPBToerwR9qY)lu=Q1cQO=YgxRX=QByt2Vn80|Azm2xaixje z_mLvbYd_#_fPFz$JFiW4Id-jGyUwDH%g(R07%WPCISk@Ls{V&(iFnziJ(@2hQ*;lP z%q#Zdf)Q~u+=(M(OxU?NNE)ax%|yw4YYT%6;?qsRJX(1paKTo?FTc($qgGUcpEFz< z`wYRI_7L|@Nmy7Is7snnr=H?_g3C~XW+o?7+^Sx`e7OLE3cvLTQ``}+S!9N(kx_C@ zTu5U>Agv+5SR}uO#?nZo 7E(@woaH-s4!apG(;cK3He~z#`*#LL z^4E$tgdCUL_BPD10#7KfqJcN4CqKUYo#GZb_Y^ayn3xz;Kx{KU%^xZn8~3(GdPI$0 zynG&k@u{gftXi(M)TYI&A;befI#b=RL4Z?0bpqtgtGNbYusl#mM^7&~Q5|xXzPdd@ z%#e{MCwK^`(Rg=vcUPARpD$B;tYFV|!W)Xwyj@PZ%76Mm6v ?yVKMw^-k z8H)8%0x)OedNb7;3y7dHq%v4TL&Oz@0sFptHyy~qRC|n8X-Eizyc`2y@XU6m 9*Ryx1&o?!x0MR{}>W z?O5;L!YcxvZ{B>3DPQ8yercE*koqC7YMa*7!LRokI*5OEo6_NNDyT}CA{3AOp!5O@ znE{fhBKy<#hT4Pr)H%>)8)g^MO$LihEXI95T|z*Gi57Ktfy%2;BH0Bx7a6BP1_!U2 zxK>$8j|qMc{86U~E hzI{@F3lljI(o&|sg zQ}oWNYGY~81}9&q6@`U*+ `fr(a#2PhxQsEFV5|7Lo-I(oBEV-3RaG4_I zpu@}>7m{0J(n>njQDE9mK^}r{ByS$k2)h|Sc&%I9hp=!v%$+1*#?I;3FY>+E&Du<4 zIc|-jn7x}}upGKGts%lyUw@l9VVw;T3BXibT+RJjhB$ml8XJqhn>I*Lr=&^zU6aWj z$)>ePg|JApY+O3zE^wu_q#cj+$qXG5m-wz~DJuj)<+VBAAIYL2Hy%*5@rft3)SHOf z<@j)05worZ6_vv$+1Jxl0XJ0f+6bZ_R^a)~lW=*clyyq8eFVcGy1&2!y7|xgrqR(F z)As1U?Ho57C`R08vzO{}$Vk_CSm54Y%i3>UA?jXc*ZKCOgtR # z33(xpgd&E=_yeErh||l_=5lv!Zh06|f9ljJ`V1N6kuxGFdr%s+*m#Y^`+wEH$I{Gw zPJ;}^f*he!Yzo@_i~hX0)Kn8F;bKtKd($GNgk87TVEZ;O473>loB}&zj1s6~@Gb0b z7{mh@C8824JN{LO!5EvB2* uPourT)>6 z;zmkIOXurXRhCJu|4v@y&_~ZLto>M>9Na?e%RN+WM=W(3UZSvOJuPrtEpaNOH8efF zGd{98B`dq%nkB9B_*Yk(v)_$PG50;kV|qsZzQw4 ki7C31RHc3v&_wZWA<-{N>7I5W#M)V8oMylAB`%?L?1u zjM&>-;~tcs2^4l-OIc^o0ySG>q$J{GqC6>mz3est8H}Bv KIJ6Afdf^ZGQT zIiSZfDB)a24eI#@2>S^5J4kej6W >yW9i?2UsFjWBpoV>^3kt%7)opf9 zlv@m{Jb&!ox?D0ca*d44aeZslN6oZ3?7f$NxDG*J!QpCpc-1y_*q^CIy29UYL+x6( zM6$3}Zu46rKTA>F-a54|63NqxF=b0dRx`CJw_i&KBxGT~m>2US!d8`85_qkY+Vkr) z{Dsb4q17TpT+BDvoxh0&8gY1F;2(E?Q;~aN?0Bi>+?q1;+qaL3BuDi^JU(!|prb{> z1ZvY=-vHpyW$lOstNQx-BO!U`*#dEG?a!dd7jZGjg%uPO+!S%yfQp9D*PnctJdkek zntKXVMiZy`zFb05whWs~J9F9j*Y9p{-$L&0?BMLHh5%$D2d5uBdQ^9?CJ(^U?>h4x zz2^RYtqJ4V3y5%5t)~o)YsO=vxdZK%8B_$h2F%Ge$I``K{zYg8Qm{JuzEx#$f2~ zy6aTki`k1mOFsrC2y3)n$Wu=6FFJhG0BtE>=l}@h+wTocE7yz|W!s#nsftVwNq5ae zS|jS~k84SBM-u6|bxUg-YnnuYwhJi@m>btObQ>|L_ni0i$p><`pV}lCBdGtgA3Ajq z3wsU$l)NvVel7a;{ks6jq6jk&k4#b2^vdt=gCQL+usJ$*fG5js#+BF;nJds}B3e=X z@&3yYH5&)J>ptYf=r959*$mY2k&=?q+Uji4RO(u$S~`bz!L8C a}jWr_T|c zIdg_7JEVkdR^E&9RkX_U^dw?Imc`L30qFoLJTK_x6uu+=+WB|Js#=M1<|PDnUMH2x zb?Ms;DW?Z+y(;!Q!1KRLD~J6)%$05)Pfkj9Ton1@ h#L3t-cm*h(y^PA075)`TF=kJ#B@1XHddbYzzzx0A!sljqV;Fue380 z7k`(Woa}!QOSUtY0g^p`bdG){Hw%kg^vwMHK1`Qz2G3wQEb18;7^J~GV_~3h0-6v^ zq`I7Dzs!-!ScN@HlrJ;0P%gj=lYpi+a_`xURYR!x$R^77O=Y))|LwWsZzUS(?R(7! z4t`yeUR1NVf~b2rp4=qfs+nhZ-$_Bo*a