Querying data from inside a slice

Developing with Prismic
1

Hi Education Team,

I'm using Next.js with Prismic and I was wondering if it's possible to query (server-side) data inside a slice, for example, if I have a slice that needs to get the amount of stars a certain GitHub repo has to then display it. If it's not possible to do that, how can I pass data I fetch on the index.js page, for example, and pass it down to every slice on the page? The SliceZone already has every prop being passed to it:
<SliceZone {...props} resolver={resolver} />
But inside the slices I only have access to the slice object, I haven't access to anything that is passed down to the SliceZone.

Best regards,
João Rodrigues

8

Hey @deepset ,

Thanks for posting this question, and welcome to the Prismic community :slight_smile:

You can use the sliceProps property to pass props to your Slices in Next and Vue. Does that address your use case? If not, let me know.

Sam

2 Likes
9

Ah nice! I managed to do what I wanted but this is definitely super useful to know, thx :slight_smile:

1 Like
10

Great! Let me know if you have any other questions :slight_smile:

1 Like
12

The example shared does not make sense, how can I access props.data and pass it down to each slice

15

Hi @spacesharkmedia,

I'd be happy to help you work through this. Could you share your project files with me, and let me know what you're trying to accomplish? You can send me your files in a DM as a ZIP file or git repo.

Sam

16

Hello Sam,

I am having trouble querying any documents outside the slicezone. I have a custom post type called tracks which I would like to query inside a nextjs component I am using this

export async function getStaticProps() {
  const trackRes = await Client().query(Prismic.Predicates.at("document.type", "track"));
  const artistRes = await Client().query(Prismic.Predicates.at("document.type", "artist"));
  const tracks = trackRes.results;
  const artists = artistRes.results;
  console.log(tracks);
  return {
    props: {
      tracks,
    }, // will be passed to the page component as props
  };
}

which is fine I can log the tracks to the console but I can not access them from within the component here is the full components code

import React, { useState } from "react";
import Footer from "../Footer/Footer";
import Header from "../Header/Header";
import AudioPlayer from "../../AudioPlayer/AudioPlayer";
import styled from "styled-components";
import Navigation from "../Navigation/Navigation";
import SlideOutCart from "../../cart/SlideOutCart/SlideOutCart";
import Prismic from "@prismicio/client";
import { Client } from "../../../prismic-configuration";

const LayoutContainer = styled.div``;

const Layout = ({ children, themeSwitch, currentTheme, tracks }) => {
  console.log(tracks);
  const exampleTrack = {
    track_name: "Track Test",
    artist_name: "Artist Name",
    track_file: "/music/test-track.mp3",
    track_image:
      "https://images.unsplash.com/photo-1523379204-ac6d21e877f6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
  };

  const [currentTrack, setCurrentTrack] = useState(exampleTrack);
  const [cartOpen, setCartOpen] = useState(false);
  const toggleCart = () => {
    setCartOpen(!cartOpen);
  };
 return (
    <LayoutContainer>
      {/*<Header />*/}
      <SlideOutCart cartOpen={cartOpen} toggleCart={toggleCart} />
      <Navigation themeSwitch={themeSwitch} currentTheme={currentTheme} toggleCart={toggleCart} />
      {children}
      <Footer themeSwitch={themeSwitch} currentTheme={currentTheme} />
      <AudioPlayer currentTrack={currentTrack} />
    </LayoutContainer>
  );
};

export async function getStaticProps() {
  const trackRes = await Client().query(Prismic.Predicates.at("document.type", "track"));
  const artistRes = await Client().query(Prismic.Predicates.at("document.type", "artist"));
  const tracks = trackRes.results;
  const artists = artistRes.results;
  console.log(tracks);
  return {
    props: {
      tracks,
      artists,
    }, // will be passed to the page component as props
  };
}

getStaticProps();

export default Layout;
17

Thanks, @spacesharkmedia, I'll take a look tomorrow :slight_smile:

18

Hi @spacesharkmedia,

I'm playing with this, and I have one initial question: does it work if you remove the function invocation, getStaticProps(), near the bottom of the component?

Let me know if not, and I'll keep trying to debug.

Sam

19

This thread has been closed due to inactivity. Flag to reopen.