Is it possible to use all ReactiveComponents with SSR and nextjs?

[gionaico]

Discussed in https://github.com/appbaseio/reactivesearch/discussions/1861

^{Originally posted by gionaico February 3, 2022}

Library Version:

• @appbaseio/reactivesearch: 3.28.0
• next: 12.0.7
• react: 17.0.2

Describe the problem

I am trying to initialize the state with initReactivesearch but I am not getting any data as a result of my aggregation from my server. I need the server to return my page with the aggregation results written.

Code

const defaulReactiveBaseProps = {
  app: "myindex",
  url: "myHost",
  credentials: "user:password"  
}

const defaultCategorySearchProps = {
  componentId: "myId",
  URLParams: false,
  showFilter: true,
  showClear: true,
  customQuery: function (props: any) {    
    return {...myQuery};
  },
  defaultQuery: function () {
    return {
      _source: {
        includes: [...],
      },
      query: {
        ...
      },
      aggs: {
        ...
      },
    };
  }
}

const Main = ({ store }) => {
 	<ReactiveBase {...defaulReactiveBaseProps} initialState={store}>
        <ReactiveComponent {...defaultCategorySearchProps}>
          {({ loading, error, rawData, aggregations, setQuery, value }) => {
            return (
              <>
                {JSON.stringify(
                  { loading, error, rawData, aggregations, setQuery, value },
                  null,
                  2
                )}
              </>
            );
          }}
        </ReactiveComponent>        
	</ReactiveBase>
}

Main.getInitialProps = async (context: any) => { 
  const store = await initReactivesearch(
    [      
      {
        ...defaultCategorySearchProps,
        source: ReactiveComponent,
      },      
    ],
    null,
    defaulReactiveBaseProps
  );
  
/* Result of the store is 
store: {
    components: [  'myId' ],
    dependencyTree: { },
    queryList: {  myId: [Object] },
    queryOptions: { },
    selectedValues: { myId: [Object] },
    internalValues: {},
    props: { myId: [Object] },
    customQueries: { myId: [Object] },
    defaultQueries: { myId: [Object] },
    queryLog: { },
    hits: {  },
    aggregations: { }
  }
*/
  return {
    store
  };
};

I am following this guide and it only works with some component but not others. I have tried some SSR examples and these are the results.

• It works

  • SingleList

    • Example code
    • Store result

      store: {
      	components: [ 'BookSensor', 'SearchResult' ],
      	dependencyTree: { BookSensor: [Object], SearchResult: [Object] },
      	queryList: { BookSensor: null, SearchResult__internal: undefined },
      	queryOptions: { BookSensor__internal: [Object], SearchResult: [Object] },
      	selectedValues: { BookSensor: [Object], SearchResult: [Object] },
      	internalValues: {},
      	props: { BookSensor: [Object], SearchResult: [Object] },
      	customQueries: {},
      	defaultQueries: {},
      	queryLog: { BookSensor: [Object], SearchResult: [Object] },
      	hits: { BookSensor: [Object], SearchResult: [Object] },
      	aggregations: { BookSensor: [Object] },
      	promotedResults: {},
      	customData: {},
      	rawData: { BookSensor: [Object], SearchResult: [Object] }
      }
      

  • MultiList

    • Example code
    • Store result

    		store: {
    			components: [ 'BookSensor', 'SearchResult' ],
    			dependencyTree: { BookSensor: [Object], SearchResult: [Object] },
    			queryList: { BookSensor: [Object], SearchResult__internal: undefined },
    			queryOptions: { BookSensor__internal: [Object], SearchResult: [Object] },
    			selectedValues: { BookSensor: [Object], SearchResult: [Object] },
    			internalValues: {},
    			props: { BookSensor: [Object], SearchResult: [Object] },
    			customQueries: {},
    			defaultQueries: {},
    			queryLog: { BookSensor: [Object], SearchResult: [Object] },
    			hits: { BookSensor: [Object], SearchResult: [Object] },
    			aggregations: { BookSensor: [Object] },
    			promotedResults: {},
    			customData: {},
    			rawData: { BookSensor: [Object], SearchResult: [Object] }
    		}
    	```
    
    

• It does not work
  • CategorySearch
    • Example code
    • Store result

     store: {
       components: [ 'BookSensor', 'SearchResult' ],
       dependencyTree: { SearchResult: [Object] },
       queryList: { BookSensor: null, SearchResult__internal: undefined },
       queryOptions: { SearchResult: [Object] },
       selectedValues: { BookSensor: [Object], SearchResult: [Object] },
       internalValues: {},
       props: { BookSensor: [Object], SearchResult: [Object] },
       customQueries: {},
       defaultQueries: {},
       queryLog: { SearchResult: [Object] },
       hits: { SearchResult: [Object] },
       aggregations: {},
       promotedResults: {},
       customData: {},
       rawData: { SearchResult: [Object] }
     }
    

  • MultiDropdownList
    • Example code
    • Store result

     store: {
       components: [ 'BookSensor', 'SearchResult' ],
       dependencyTree: { SearchResult: [Object] },
       queryList: { BookSensor: null, SearchResult__internal: undefined },
       queryOptions: { SearchResult: [Object] },
       selectedValues: { BookSensor: [Object], SearchResult: [Object] },
       internalValues: {},
       props: { BookSensor: [Object], SearchResult: [Object] },
       customQueries: {},
       defaultQueries: {},
       queryLog: { SearchResult: [Object] },
       hits: { SearchResult: [Object] },
       aggregations: {},
       promotedResults: {},
       customData: {},
       rawData: { SearchResult: [Object] }
     }      
    

With some components I get a result in the aggregations field but with others I don't. Maybe this is the normal behavior but I would like to understand why in some components I get results (aggregations) and in others I don't.

I have been studying the library and I have seen that some things are restricted to a list of components:

// lines 18 to 28 
var componentsWithHighlightQuery = [_constants.componentTypes.dataSearch, _constants.componentTypes.categorySearch];

var componentsWithOptions = [_constants.componentTypes.reactiveList, _constants.componentTypes.reactiveMap, _constants.componentTypes.singleList, _constants.componentTypes.multiList, _constants.componentTypes.tagCloud].concat(componentsWithHighlightQuery);

/**
    componentsWithOptions =  [
        'REACTIVELIST',
        'REACTIVE_MAP',
        'SINGLELIST',
        'MULTILIST',
        'TAGCLOUD',
        'DATASEARCH',
        'CATEGORYSEARCH'
  ]
*/

In line 182 a filter is made and allows only some components.