From 14faffc87c38d41f1da619f30882af4973d2c208 Mon Sep 17 00:00:00 2001 From: Joao Fidelis Date: Fri, 30 Aug 2019 11:41:52 -0300 Subject: [PATCH 1/4] use search metadata query with ssr --- CHANGELOG.md | 2 + react/components/LocalQuery.js | 94 +++++++++++++++++++--------------- 2 files changed, 55 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0fc77484c..9547da211 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Changed +- Do SearchMetadata query on SSR to get title and description. ## [3.30.0] - 2019-08-29 ### Changed diff --git a/react/components/LocalQuery.js b/react/components/LocalQuery.js index f48334101..3d22d3c56 100644 --- a/react/components/LocalQuery.js +++ b/react/components/LocalQuery.js @@ -1,8 +1,10 @@ import { path } from 'ramda' import React from 'react' import { useRuntime } from 'vtex.render-runtime' -import SearchQuery from './SearchQuery' +import { Query } from 'react-apollo' +import { searchMetadata as searchMetadataQuery } from 'vtex.store-resources/Queries' +import SearchQuery from './SearchQuery' import { SORT_OPTIONS } from '../OrderBy' const DEFAULT_MAX_ITEMS_PER_PAGE = 10 @@ -26,47 +28,57 @@ const LocalQuery = props => { const { page: runtimePage } = useRuntime() return ( - - {(searchQuery, extraParams) => { - return render({ - ...props, - searchQuery: { - ...searchQuery, - data: { - ...(searchQuery.data || {}), - products: path( - ['data', 'productSearch', 'products'], - searchQuery - ), - }, - // backwards-compatibility with search-result <= 3.13.x - facets: path(['data', 'facets'], searchQuery), - products: path(['data', 'products'], searchQuery), - recordsFiltered: path( - ['data', 'facets', 'recordsFiltered'], - searchQuery - ), - }, - searchContext: runtimePage, - pagesPath: runtimePage, - map, - orderBy, - priceRange, - page: extraParams.page, - from: extraParams.from, - to: extraParams.to, - maxItemsPerPage, - }) + + {searchMetadataQuery => { + return ( + + {(searchQuery, extraParams) => { + return render({ + ...props, + searchQuery: { + ...searchQuery, + data: { + ...(searchQuery.data || {}), + products: path( + ['data', 'productSearch', 'products'], + searchQuery + ), + }, + // backwards-compatibility with search-result <= 3.13.x + facets: path(['data', 'facets'], searchQuery), + products: path(['data', 'products'], searchQuery), + recordsFiltered: path( + ['data', 'facets', 'recordsFiltered'], + searchQuery + ), + }, + searchMetadata: path( + ['data', 'searchMetadata'], + searchMetadataQuery + ), + searchContext: runtimePage, + pagesPath: runtimePage, + map, + orderBy, + priceRange, + page: extraParams.page, + from: extraParams.from, + to: extraParams.to, + maxItemsPerPage, + }) + }} + + ) }} - + ) } From b6eb348e22db2fe7dfaf37c423cc06d2703ba47f Mon Sep 17 00:00:00 2001 From: Joao Fidelis Date: Mon, 2 Sep 2019 09:58:28 -0300 Subject: [PATCH 2/4] parallelize metadata query --- react/components/SearchQuery.js | 76 +++++++++++++++++++++++++-------- 1 file changed, 58 insertions(+), 18 deletions(-) diff --git a/react/components/SearchQuery.js b/react/components/SearchQuery.js index b10c7a3db..6ecc61aa0 100644 --- a/react/components/SearchQuery.js +++ b/react/components/SearchQuery.js @@ -1,7 +1,10 @@ import { zip, split, head, join, tail } from 'ramda' import React, { useMemo } from 'react' -import { Query } from 'react-apollo' -import { productSearchV2 } from 'vtex.store-resources/Queries' +import { graphql, compose } from 'react-apollo' +import { + productSearchV2 as productSearch, + searchMetadata, +} from 'vtex.store-resources/Queries' const DEFAULT_PAGE = 1 @@ -13,6 +16,53 @@ const splitMap = split(MAP_SEPARATOR) const joinQuery = join(QUERY_SEPARATOR) const joinMap = join(MAP_SEPARATOR) +const shouldSkipMetadata = map => { + const firstMap = head((map || '').split(',')) + return firstMap !== 'c' && firstMap !== 'b' +} + +const ParallelQueries = ({ + children, + extraParams, + productSearch, + searchMetadata = {}, //would be undefined when skipped +}) => { + // We need to do this to keep the same format as when we were using the Query component. + const searchInfo = useMemo( + () => ({ + ...(productSearch || {}), + data: { + productSearch: productSearch && productSearch.productSearch, + facets: productSearch && productSearch.facets, + searchMetadata: searchMetadata && searchMetadata.searchMetadata, + }, + }), + [productSearch, searchMetadata] + ) + return children(searchInfo, extraParams) +} + +const productSearchHOC = graphql(productSearch, { + name: 'productSearch', + options: props => ({ + variables: props.variables, + ssr: false, + }), +}) + +const searchMetadataHOC = graphql(searchMetadata, { + name: 'searchMetadata', + skip: props => props.skipSearchMetadata, + options: props => ({ + variables: { query: props.variables.query, map: props.variables.map }, + }), +}) + +const EnhancedParallelQueries = compose( + productSearchHOC, + searchMetadataHOC +)(ParallelQueries) + const includeFacets = (map, query) => !!(map && map.length > 0 && query && query.length > 0) @@ -84,25 +134,15 @@ const SearchQuery = ({ page, } }, [variables, page]) + return ( - - {searchQuery => { - const safeSearchQuery = searchQuery.error - ? { ...searchQuery, data: {} } - : searchQuery - return children(safeSearchQuery, extraParams) - }} - + {children} + ) } From 2c6942098e55e8dcd7100d71cac7a27a1fd794ea Mon Sep 17 00:00:00 2001 From: Joao Fidelis Date: Mon, 2 Sep 2019 10:18:20 -0300 Subject: [PATCH 3/4] remove query from local query component --- react/components/LocalQuery.js | 92 +++++++++++++++------------------- 1 file changed, 41 insertions(+), 51 deletions(-) diff --git a/react/components/LocalQuery.js b/react/components/LocalQuery.js index 3d22d3c56..9efc24417 100644 --- a/react/components/LocalQuery.js +++ b/react/components/LocalQuery.js @@ -1,7 +1,6 @@ import { path } from 'ramda' import React from 'react' import { useRuntime } from 'vtex.render-runtime' -import { Query } from 'react-apollo' import { searchMetadata as searchMetadataQuery } from 'vtex.store-resources/Queries' import SearchQuery from './SearchQuery' @@ -28,57 +27,48 @@ const LocalQuery = props => { const { page: runtimePage } = useRuntime() return ( - - {searchMetadataQuery => { - return ( - - {(searchQuery, extraParams) => { - return render({ - ...props, - searchQuery: { - ...searchQuery, - data: { - ...(searchQuery.data || {}), - products: path( - ['data', 'productSearch', 'products'], - searchQuery - ), - }, - // backwards-compatibility with search-result <= 3.13.x - facets: path(['data', 'facets'], searchQuery), - products: path(['data', 'products'], searchQuery), - recordsFiltered: path( - ['data', 'facets', 'recordsFiltered'], - searchQuery - ), - }, - searchMetadata: path( - ['data', 'searchMetadata'], - searchMetadataQuery - ), - searchContext: runtimePage, - pagesPath: runtimePage, - map, - orderBy, - priceRange, - page: extraParams.page, - from: extraParams.from, - to: extraParams.to, - maxItemsPerPage, - }) - }} - - ) + + {(searchQuery, extraParams) => { + return render({ + ...props, + searchQuery: { + ...searchQuery, + data: { + ...(searchQuery.data || {}), + products: path( + ['data', 'productSearch', 'products'], + searchQuery + ), + }, + // backwards-compatibility with search-result <= 3.13.x + facets: path(['data', 'facets'], searchQuery), + products: path(['data', 'products'], searchQuery), + recordsFiltered: path( + ['data', 'facets', 'recordsFiltered'], + searchQuery + ), + }, + searchMetadata: path(['data', 'searchMetadata'], searchMetadataQuery), + searchContext: runtimePage, + pagesPath: runtimePage, + map, + orderBy, + priceRange, + page: extraParams.page, + from: extraParams.from, + to: extraParams.to, + maxItemsPerPage, + }) }} - + ) } From 7acc03cecbd1078310845b3e91137f24e952da63 Mon Sep 17 00:00:00 2001 From: Joao Fidelis Date: Mon, 2 Sep 2019 10:19:54 -0300 Subject: [PATCH 4/4] full revert local query --- react/components/LocalQuery.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/react/components/LocalQuery.js b/react/components/LocalQuery.js index 9efc24417..f48334101 100644 --- a/react/components/LocalQuery.js +++ b/react/components/LocalQuery.js @@ -1,9 +1,8 @@ import { path } from 'ramda' import React from 'react' import { useRuntime } from 'vtex.render-runtime' -import { searchMetadata as searchMetadataQuery } from 'vtex.store-resources/Queries' - import SearchQuery from './SearchQuery' + import { SORT_OPTIONS } from '../OrderBy' const DEFAULT_MAX_ITEMS_PER_PAGE = 10 @@ -56,7 +55,6 @@ const LocalQuery = props => { searchQuery ), }, - searchMetadata: path(['data', 'searchMetadata'], searchMetadataQuery), searchContext: runtimePage, pagesPath: runtimePage, map,