Slice type does not work with @prismicio/react v2 SliceZone Component

Developing with Prismic
1

The graphql implementation for "slice type" just uses "type" which causes an issue with v2 of @prismicio/react SliceZone component. It's looking for the property slice_type. This results in components never being found.

@prismicio/react/src/SliceZone.tsx

/**
 * The minimum required properties to represent a Prismic Slice for the
 * `<SliceZone>` component.
 *
 * If using Prismic's REST API, use the `Slice` export from `@prismicio/types`
 * for a full interface.
 *
 * @typeParam SliceType - Type name of the Slice.
 */
export type SliceLike<SliceType extends string = string> = Pick<
	prismicT.Slice<SliceType>,
	"slice_type"
>;

Reference Example:

slices {
      __typename
      ... on WorkDetailSlicesWork_detail_intro {
        type
        variation {
          __typename
          ... on WorkDetailSlicesWork_detail_introDefault {
            primary {
              title
              description
              services
              results
            }
          }
        }
      }
    }
2

Hello @charlie1, thanks for pointing this out. Can you provide us with the entire page query of your project so that we can reproduce the error on our end?

4

@Pau Sure! The repository is just anml.

query getWorkDetail($uid: String = "yummly", $lang: String = "en-us") {
  workDetail(uid: $uid lang: $lang) {
    title
    second
    subtitle
    background {
      _linkType
      ... on _FileLink {
        name
        url
        size
      }
      ... on _ImageLink {
        name
        url
        size
      }
    }
    _meta {
      uid
    }
    slices {
      __typename
      ... on WorkDetailSlicesWork_detail_intro {
        type
        variation {
          __typename
          ... on WorkDetailSlicesWork_detail_introDefault {
            primary {
              title
              description
              services
              results
            }
          }
        }
      }
    }
  }
}
5

Thanks. Can we see the entire page file? We'd like to see how you called the API using Nuxt or Next so we can replicate the use case with the same setup.

6

Sure, it's using Next & Apollo. Here's the file:

import { useContext, useEffect } from 'react';
import {
  GET_ALL_WORK_DETAILS,
  GET_HOME,
  GET_WORK_DETAIL,
} from '../../operations/queries';
import { client } from '../api/apollo-client';
import Layout from '/components/Layout';
import { GlobalContext } from '/utils/globalContext';

const WorkDetail = ({ doc, menu, footer, lang, preview, homeData }) => {
  const getApi = useContext(GlobalContext);

  useEffect(() => {
    const { updateGlobalStore } = getApi;
    updateGlobalStore({ home: homeData });
  }, [homeData, getApi]);
  return <Layout data={doc}></Layout>;
};

export async function getStaticProps({
  params,
  preview,
  previewData,
  locale,
  locales,
}) {
  const { data: homeData, errors: homeErrors = null } = await client.query({
    query: GET_HOME,
  });
  const {
    allHomes: {
      edges: {
        [0]: { node },
      },
    },
  } = homeData;

  const { data, errors = null } = await client.query({
    query: GET_WORK_DETAIL,
    variables: {
      uid: params?.uid,
    },
  });

  const { workDetail: doc } = data;

  return { props: { doc, homeData: node }, revalidate: 10 };
}

export async function getStaticPaths() {
  const { data, errors = null } = await client.query({
    query: GET_ALL_WORK_DETAILS,
  });

  const {
    allWorkDetails: { edges },
  } = data;

  return {
    paths: edges.map((edge) => {
      const uid = edge?.node?._meta?.uid;
      return { params: { uid: uid } };
    }),
    fallback: false,
  };
}

export default WorkDetail;

and for the client setup

import { createPrismicLink } from 'apollo-link-prismic';
import {
  InMemoryCache,
  IntrospectionFragmentMatcher,
} from 'apollo-cache-inmemory';
import { ApolloClient } from '@apollo/client';
import fragmentTypes from '/utils/fragmentTypes.json';

const apiEndpoint = process.env.PRISMIC_ENDPOINT;
const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData: fragmentTypes,
});

export const client = new ApolloClient({
  link: createPrismicLink({
    uri: apiEndpoint,
    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
  }),
  cache: new InMemoryCache({ fragmentMatcher }),
});
7

Thanks, we'll give it a try and tell you what we find asap.

8

I think I'm experiencing the same issue when trying to use the SliceZone from the @prismicio/react package. It expects a slice_type field but there is none available for my slice when I try out the query in the Prismic graphQL interface.

9

Thanks for the information @charlie1 and @jorundur. We've agreed this is something that needs to be worked on. I've opened a ticket for it. As soon as we have news we'll post an update.

Thanks

1 Like
12

Hello everyone, we released a fix for this issue: feat: support Prismic's GraphQL API in `<SliceZone>` by angeloashmore · Pull Request #141 · prismicio/prismic-react · GitHub

You are able to use Slice Machine, its Slice Zone, and GraphQL from now on :grin:

2 Likes