{"id":23609,"date":"2022-11-27T06:47:27","date_gmt":"2022-11-27T01:17:27","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/"},"modified":"2022-11-27T06:47:27","modified_gmt":"2022-11-27T01:17:27","slug":"solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/","title":{"rendered":"[Solved] Preserving prior form data when navigating back in Gatsbyjs"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

I ended up setting up an onClick listener on the filter where if a user clicks it will create a query string and navigate to the same page but with query parameters.<\/p>\n

Then on page load I read the location.search with contains the query, then parse the query and set the page state from the query. This way when the user refreshes the page or navigates to another page and comes with the back button to the original page, the selected filters are preserved.<\/p>\n

Here the code:<\/p>\n

const ProductPage = (props) => {\n    const { products, breadcrumb } = props.pageContext\n    const {location} = props\n    const filter = qs.parse((location.search).substring(1))\n    \n    const initialFilter = {\n      brands: [],\n      types: [],\n      ages: [],\n      breeds: [],\n      features: [],\n      petTypes: [],\n  }\n  const filtered = Object.assign({},initialFilter,filter)\n  const handleChange = (event, group) => {\n      let checkedOptn = [...filtered[group]]\n      let optionsSelected = {\n        ...filtered,\n        [group]: checkedOptn.indexOf(event.target.name) > -1 ? checkedOptn.filter(item => item !== event.target.name) :\n            [...checkedOptn, event.target.name]\n\n    }\n    let queryString = qs.stringify(optionsSelected)\n    console.log(queryString)\n    const path = queryString.length > 0 ? `\/urunler?${queryString}` :'\/urunler'\n      navigate(path)\n  }\n    \n    const pageTitle = () => {\n      if (location.pathname==='\/urunler\/kedi') {return 'Kedi \u00dcr\u00fcnlerimiz'}\n      if (location.pathname==='\/urunler\/kopek') {return 'K\u00f6pek \u00dcr\u00fcnlerimiz'}\n      return '\u00dcr\u00fcnlerimiz'\n    }\n    \n    return (\n    <Layout location={location} pageTitle = {pageTitle()} crumbs={breadcrumb.crumbs}>\n       <ProductList products = {products} checked={filtered} handleChange={handleChange}\/>\n    <\/Layout>\n    )\n}\n\nexport default ProductPage\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Preserving prior form data when navigating back in Gatsbyjs <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] I ended up setting up an onClick listener on the filter where if a user clicks it will create a query string and navigate to the same page but with query parameters. Then on page load I read the location.search with contains the query, then parse the query and set the page state from … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[5058,784],"class_list":["post-23609","post","type-post","status-publish","format-standard","hentry","category-solved","tag-gatsby","tag-reactjs"],"yoast_head":"\n[Solved] Preserving prior form data when navigating back in Gatsbyjs - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Preserving prior form data when navigating back in Gatsbyjs - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] I ended up setting up an onClick listener on the filter where if a user clicks it will create a query string and navigate to the same page but with query parameters. Then on page load I read the location.search with contains the query, then parse the query and set the page state from ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-27T01:17:27+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Preserving prior form data when navigating back in Gatsbyjs\",\"datePublished\":\"2022-11-27T01:17:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\\\/\"},\"wordCount\":110,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"gatsby\",\"reactjs\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\\\/\",\"name\":\"[Solved] Preserving prior form data when navigating back in Gatsbyjs - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-11-27T01:17:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Preserving prior form data when navigating back in Gatsbyjs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Preserving prior form data when navigating back in Gatsbyjs - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Preserving prior form data when navigating back in Gatsbyjs - JassWeb","og_description":"[ad_1] I ended up setting up an onClick listener on the filter where if a user clicks it will create a query string and navigate to the same page but with query parameters. Then on page load I read the location.search with contains the query, then parse the query and set the page state from ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/","og_site_name":"JassWeb","article_published_time":"2022-11-27T01:17:27+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Preserving prior form data when navigating back in Gatsbyjs","datePublished":"2022-11-27T01:17:27+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/"},"wordCount":110,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["gatsby","reactjs"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/","url":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/","name":"[Solved] Preserving prior form data when navigating back in Gatsbyjs - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-27T01:17:27+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-preserving-prior-form-data-when-navigating-back-in-gatsbyjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Preserving prior form data when navigating back in Gatsbyjs"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/23609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=23609"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/23609\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=23609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=23609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=23609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}