diff --git a/types/react-instantsearch-dom/react-instantsearch-dom-tests.tsx b/types/react-instantsearch-dom/react-instantsearch-dom-tests.tsx index 1e27e1d09f..6d9b7b55f8 100644 --- a/types/react-instantsearch-dom/react-instantsearch-dom-tests.tsx +++ b/types/react-instantsearch-dom/react-instantsearch-dom-tests.tsx @@ -204,12 +204,62 @@ import { Hit, connectRefinementList, connectMenu } from 'react-instantsearch-cor ; -// https://community.algolia.com/react-instantsearch/guide/Search_parameters.html - - - // widgets -; +() => { + // https://community.algolia.com/react-instantsearch/guide/Search_parameters.html + + + // widgets + ; +}; + +import { createInstantSearch } from 'react-instantsearch-dom/server'; +// import { createServer } from 'http'; +declare function createServer(handler: (req: any, res: any) => any): any; +import { renderToString } from 'react-dom/server'; + +() => { + // https://community.algolia.com/react-instantsearch/guide/Server-side_rendering.html + + // Now we create a dedicated `InstantSearch` component + const { InstantSearch, findResultsState } = createInstantSearch(); + + class App extends React.Component { + render() { + return ( + + + + + ); + } + } + + const server = createServer(async (req, res) => { + const searchState = {query: 'chair'}; + const resultsState = await findResultsState(App, {searchState}); + const appInitialState = {searchState, resultsState}; + const appAsString = renderToString(); + res.send( + ` + + + +

Awesome server-side rendered search

+ ${appAsString} + + + + ` + ); + }); +}; diff --git a/types/react-instantsearch-dom/server.d.ts b/types/react-instantsearch-dom/server.d.ts new file mode 100644 index 0000000000..b1ba930ace --- /dev/null +++ b/types/react-instantsearch-dom/server.d.ts @@ -0,0 +1,14 @@ +import * as React from 'react'; + +/** + * Creates a specialized root InstantSearch component. It accepts + * an algolia client and a specification of the root Element. + * @param defaultAlgoliaClient - a function that builds an Algolia client + * @returns an InstantSearch root + */ +export function createInstantSearch( + defaultAlgoliaClient?: (appId: string, apiKey: string, options: { _useRequestCache: boolean }) => object +): { + InstantSearch: React.ComponentClass; + findResultsState(App: React.ComponentType, props: any): Promise +}; diff --git a/types/react-instantsearch/server.d.ts b/types/react-instantsearch/server.d.ts new file mode 100644 index 0000000000..d8fb0d1a46 --- /dev/null +++ b/types/react-instantsearch/server.d.ts @@ -0,0 +1 @@ +export { createInstantSearch } from 'react-instantsearch-dom/server';