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

**URL:** <https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496>\
**Category:** Developing with Prismic\
**Tags:** graphql\
**Created:** [March 24, 2022, 12:23am UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496 "2022-03-24T00:23:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![charlie1](https://avatars.discourse-cdn.com/v4/letter/c/ec9cab/32.png) [@charlie1](https://community.prismic.io/u/charlie1)\
**Post date:** [March 24, 2022, 12:23am UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/1 "2022-03-24T00:23:13Z")

</div>

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

```auto
/**
 * 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:

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

```

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [March 24, 2022, 2:47am UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/2 "2022-03-24T02:47:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![charlie1](https://avatars.discourse-cdn.com/v4/letter/c/ec9cab/32.png) [@charlie1](https://community.prismic.io/u/charlie1)\
**Post date:** [March 24, 2022, 3:16am UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/4 "2022-03-24T03:16:35Z")

</div>

@Pau Sure! The repository is just anml.

```auto
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
            }
          }
        }
      }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [March 25, 2022, 1:24am UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/5 "2022-03-25T01:24:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![charlie1](https://avatars.discourse-cdn.com/v4/letter/c/ec9cab/32.png) [@charlie1](https://community.prismic.io/u/charlie1)\
**Post date:** [March 28, 2022, 6:45pm UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/6 "2022-03-28T18:45:50Z")

</div>

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

```auto
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

```auto
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 }),
});

```

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [March 29, 2022, 3:14am UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/7 "2022-03-29T03:14:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jorundur](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jorundur](https://community.prismic.io/u/jorundur)\
**Post date:** [March 29, 2022, 9:21am UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/8 "2022-03-29T09:21:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [March 30, 2022, 10:33pm UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/9 "2022-03-30T22:33:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [April 1, 2022, 12:36am UTC](https://community.prismic.io/t/slice-type-does-not-work-with-prismicio-react-v2-slicezone-component/9496/12 "2022-04-01T00:36:56Z")

</div>

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](https://github.com/prismicio/prismic-react/pull/141)

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