How to use @apollo/react-ssr - 7 common examples

const { AppTree, req } = ctx;

        let pageProps = {};
        if (PageComponent.getInitialProps) {
          pageProps = await PageComponent.getInitialProps(ctx);
        }

        const baseUrl = getBaseUrl(req);

        // Run all GraphQL queries in the component tree
        // and extract the resulting data
        const apolloClient = initApolloClient(baseUrl, {});

        try {
          // Run all GraphQL queries
          await require('@apollo/react-ssr').getDataFromTree(
            ,
          );
        } catch (error) {
          // Prevent Apollo Client GraphQL errors from crashing SSR.
          // Handle them in components via the data.error prop:
          // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
          console.error('Error while running `getDataFromTree`', error);
        }

        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore need to be cleared manually

};

  const sheet = new ServerStyleSheet(); // <-- creating out stylesheet
  const clientApp = (
    
      
        
          
            
          
        
      
    
  );
  try {
    const content = await renderToStringWithData(clientApp);
    const initialState = client.extract();
    return {
      head: Helmet.renderStatic(),
      html: content,
      apolloState: initialState,
      sheet: sheet,
    };
  } catch (error) {
    console.log("error :", error);
  }
};

const sheet = new ServerStyleSheet(); // <-- creating out stylesheet
  const clientApp = (
    
      
        
          
            
              
            
          
        
      
    
  );
  try {
    const content = await renderToStringWithData(clientApp);
    const initialState = client.extract();
    return {
      head: Helmet.renderStatic(),
      html: content,
      initialData: { ...initialData, initialProps },
      apolloState: initialState,
      sheet: sheet,
    };
  } catch (error) {
    console.log("error :", error);
  }
};

export const handler = async event => {
    const apolloClient = createClient();
    const context = {};

    const app = (
        
            
                
            
        
    );

    // Executes all graphql queries for the current state of application
    await getDataFromTree(app);
    const content = ReactDOMServer.renderToStaticMarkup(app);
    const state = apolloClient.extract();
    const helmet = Helmet.renderStatic();
    return injectContent(content, helmet, state);
};

{!isApolloTraversal
              ? sheets.collect(
                  
                    {coreApp}
                  
                )
              : coreApp}
          
        
      
    
  );

  // This is so we can do `apolloClient.extract()` later on.
  try {
    await getDataFromTree(completeApp(true /* isApolloTraversal */));
  } catch (ex) {
    next(ex);
    return;
  }

  const renderedApp = renderToString(completeApp(false /* isApolloTraversal */));
  if (context.url) {
    res.redirect(301, context.url);
    return;
  }

  const materialUICSS = sheets.toString();
  const nonMaterialCSS = sheetsNonMaterialUI.toString();

  /*
    XXX(mime): Server-side rendering for CSS doesn't allow for inserting CSS the same way we do

const context = {};

    const app = (
        
            
                
            
        
    );

    // Executes all graphql queries for the current state of application
    await getDataFromTree(app);
    const content = ReactDOMServer.renderToStaticMarkup(app);
    const state = apolloClient.extract();
    const helmet = Helmet.renderStatic();
    return { html: injectContent(content, helmet, state), state };
};