Can't get querying other types in a sub directory to work

We're using Slice Machine to build a new website with Next.js. I'm currently stuck trying to get our blog posts to render out in the next app. Here are the contents of my pages directory:


Everything works as expected, with the exception of pages/blog/[uid].tsx. Here are the contents of that file:

import SliceZone from 'next-slicezone';
import { useGetStaticProps, useGetStaticPaths } from 'next-slicezone/hooks';
import { Client } from '../../prismic-configuration';
import Layout from '../../components/Layout';

import resolver from '../../sm-resolver';

type Props = any;

export default function BlogPost(props: Props) {
  console.log({ props });
  return (
    <Layout globals={props.globals}>
      <h1>Blog template</h1>
      <SliceZone {...props} resolver={resolver} />
    </Layout>
  );
}
// Fetch content from prismic
// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: 'blog',
  apiParams({ params }: any) {
    return {
      uid: params.uid,
    };
  },
});

// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  formatPath: (prismicDocument: any) => {
    return {
      params: {
        uid: prismicDocument.uid,
      },
    };
  },
});

When I try to access http://localhost:3000/blog/test-blog-post I am presented with the following:

In prismic I have a repeatable type of "Blog" with the api id of "blog".

Hello @kevin, welcome to the community!

I'm wondering if the [uid].js file is creating a conflict between the routes. Are you creating a default export for that one?

Could you show me an example of how this file looks like?

[uid].js looks like this:

import SliceZone from 'next-slicezone';
import { useGetStaticProps, useGetStaticPaths } from 'next-slicezone/hooks';
import { Client } from '../prismic-configuration';
import Layout from '../components/Layout';

import resolver from '../sm-resolver';

const Page = (props) => {
  return (
    <Layout globals={props.globals}>
      <SliceZone {...props} resolver={resolver} />
    </Layout>
  );
};
// Fetch content from prismic
// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticProps = useGetStaticProps({
  client: Client(),
  uid: ({ params }) => params.uid,
});

// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: 'page',
  fallback: process.env.NODE_ENV === 'development',
  formatPath: (prismicDocument) => {
    return {
      params: {
        uid: prismicDocument.uid,
      },
    };
  },
});

export default Page;

Ok, So I think the problem comes from the Lifecycle hooks of [uid].js They are using the old syntax to retrieve the uid. useGetStaticProps isn't using apiParams.

You're using it correctly in /blog/[uid].tsx tho. Look at this document where we explain how to query repeatable documents:

The routing for your pages is:

  • For type Page: /uid
  • For the Blog type: /blog/uid for the Blog types

Is that correct?

Yes that's what I'm trying to do. Thanks, I'll make sure we're using the right approach in both places.

OK I updated to look like that, now I can get to the blog page but it's telling me that my slice zone is empty when it is not. For the props on blog/uid, I'm getting an empty array of slices, and an error message "Error: Unable to encode null of type object", and a null UID prop.

Actually, after updating the hooks I am no longer getting slices on my normal pages either. I have ensured that all of my prismic-related NPM packages are completely up to date.

The following code made my blog route work (working code on the right, this is a diff of what I changed):

1 Like

@Paulina it seems that the docs are out of sync with the latest version of the available packages, which led to my confusion.

Hey @kevin, thanks for sharing all the troubleshooting details of your project.
Could you please point out to me where did you saw an outdated section of the documentation?
It'll help us know if something in the docs isn't clear enough; feedback is always welcome!

The code that you recommended I follow from the docs is what broke my pages. Going back to what I was originally using fixed the issues. Here's my whole package.json so that you can see which versions I am using.

{
  "name": "marketing-next",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc --project tsconfig.json --pretty --noEmit",
    "lint": "eslint --ext js,jsx,ts,tsx --fix --cache",
    "slicemachine": "start-slicemachine --port 9999",
    "storybook": "start-storybook -p 8888",
    "build-storybook": "build-storybook",
    "everything": "concurrently \"yarn dev\" \"yarn slicemachine\" \"yarn storybook\"",
    "prepare": "husky install"
  },
  "dependencies": {
    "@aaronhayes/react-use-hubspot-form": "^1.2.5",
    "@brainhubeu/react-carousel": "^2.0.4",
    "@prismicio/client": "^5.0.0",
    "@storybook/react": "^6.2.9",
    "@svgr/webpack": "^5.5.0",
    "next": "10.2.0",
    "next-slicezone": "^0.0.15",
    "next-transpile-modules": "^7.0.0",
    "papaparse": "^5.3.1",
    "prismic-javascript": "^3.0.2",
    "prismic-reactjs": "^1.3.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-select-search": "^3.0.7",
    "react-table": "^7.7.0",
    "sanitize.css": "^12.0.1",
    "styled-components": "^5.3.0",
    "theme-ui": "^0.8.1"
  },
  "devDependencies": {
    "@types/brainhubeu__react-carousel": "^2.0.2",
    "@types/node": "^15.0.2",
    "@types/papaparse": "^5.2.5",
    "@types/react": "^17.0.5",
    "@types/react-dom": "^17.0.3",
    "@types/react-table": "^7.7.1",
    "@types/styled-components": "^5.1.9",
    "@typescript-eslint/eslint-plugin": "^4.26.0",
    "@typescript-eslint/parser": "^4.26.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-require": "^3.1.3",
    "babel-plugin-styled-components": "^1.12.0",
    "concurrently": "^6.2.0",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0",
    "prettier": "^2.3.0",
    "prismic-cli": "^3.8.13",
    "slice-machine-ui": "^0.0.46",
    "typescript": "4.2.4"
  },
  "license": "MIT"
}

1 Like

Ok, I see; thanks for the info.
We're constantly making updates to the documentation, so all the feedback is more than welcome

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.