no pageProps initially on catch all route #14659

BernardA · 2020-06-28T18:22:42Z

BernardA
Jun 28, 2020

Bug report

I am using the experimental optional catch all route in order to handle a search feature on a small ads app.

Routes could be:
/search => main search page
/search/city/rootCategory/parentCategory
/search/city/rootCategory/parentCategory/category

Due to the huge number of possible routes, I am attempting to use getStaticPaths with getStaticProps on the page
/pages/search/[[...query]].js. The idea is to pre-build static pages for existing ads and use the fallback:true to have Nextjs handle new routes on demand.

The issue I am facing is that it seems that pageProps is not populated initially and that generates errors because of missing property. Namely the Layout component requires the categories props` which is passed on downstream.

Later on console.log show that the props are populated but then the error already went downstream.

Describe the bug

To Reproduce

The console.log on _app.js below will show empty pageProps initially:

  import withReduxSaga from 'next-redux-saga';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
 import { ThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import wrapper from '../store/reduxWrapper';
 import theme from '../styles/theme';
 // eslint-disable-next-line no-unused-vars
 import styles from '../styles/layout.css';
import 'react-quill/dist/quill.snow.css';
 import Layout from '../components/layout';

function MyApp(props) {
console.log('my app props', props);
const { Component, pageProps } = props;
React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
        jssStyles.parentElement.removeChild(jssStyles);
    }
}, []);

return (
    <>
        <Head>
            <title>My page</title>
            <meta
                name="viewport"
                content="minimum-scale=1, initial-scale=1, width=device-width"
            />
        </Head>
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <Layout categories={pageProps.categories}>
                <Component {...pageProps} />
            </Layout>
        </ThemeProvider>
    </>
);
}

 MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
pageProps: PropTypes.object.isRequired,
};

 export default wrapper.withRedux(withReduxSaga((MyApp)));

The page /pages/search/[[...query]].js

 import axios from 'axios';
import { useRouter } from 'next/router';
// import PropTypes from 'prop-types';
import getCategories from '../../lib/getCategories';
import getCities from '../../lib/getCities';
 import { urlWriter } from '../../tools/functions';


 const Search = (props) => {
console.log('search props', props)
const router = useRouter();

if (router.isFallback) {
    return <div>Loading...</div>;
}
return <div>Search</div>
}

Search.propTypes = {
    // params: PropTypes.object.isRequired,
};

 export default Search

 ... graphQl query

  const apiQl = (data, variables = null) => {
return axios
    .post(process.env.API_GRAPHQL_URL, {
        query: data,
        variables,
    })
    .then((response) => {
        return response.data;
    });
};

export async function getStaticPaths() {
let categories = await getCategories();
let cities = await getCities();
categories = categories.data.categories;
cities = cities.data.collectionQueryAddresses;
const paths = [];
// main /search route
paths.push({
    params: { query: [] }
});
cities.forEach((city) => {
    categories.forEach((cat) => {
        if (cat.root && cat.root.title === cat.parent.title) {
            paths.push({
                params: {
                    query: [
                        urlWriter(city.city),
                        urlWriter(cat.root.title),
                        urlWriter(cat.title),
                        null,
                    ]
                }
            })
        }
        if (cat.root && cat.root.title !== cat.parent.title) {
            paths.push({
                params: {
                    query: [
                        urlWriter(city.city),
                        urlWriter(cat.root.title),
                        urlWriter(cat.parent.title),
                        urlWriter(cat.title),
                    ],
                }
            });
        }
    });
  });

return {
    paths,
    fallback: true,
}
}

 export async function getStaticProps({ params }) {
console.log('params', params);
let categories = await getCategories();
categories = categories.data.categories;
const variables = {
    categoryParent: params.categoryParent,
    categoryId: params.categoryId,
    city: params.city,
};

const data = await apiQl(queryQl, variables);

return {
    props: {
        ads: data.data.ads || [],
        categories,
        params,
    },
};

Expected behavior

pageProps should be available on _app.js from the start, which is the case on the homepage route.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

OS:macOS
Browser (if applies) [e.g. chrome, safari]
Version of Next.js: "9.4.4",
Version of Node.js: v12.16.0

Additional context

Add any other context about the problem here.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

no pageProps initially on catch all route #14659

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

no pageProps initially on catch all route #14659

Uh oh!

BernardA Jun 28, 2020

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

Replies: 0 comments

BernardA
Jun 28, 2020