Q:

how to query prismic slices and returning data from each slice

I'm trying to use Gatsby's /___graphq debugger and the README file for gatsby-source-prismic says you can return slices. So below I'm returning the slice with a name PrismicProductBodySteps.
{
  allPrismicHomePage {
        edges {
          node {
        data {
          seo_title
          body {
            __typename
            ... on PrismicProductBodySteps {
              }
            }
          }
        }
       }
    }
  }
}

Can someone explain to me what ... on PrismicProductBodySteps means ? 
In a gatsby component I've seen this as an example. 
body {
  ... on PrismicProductsBodySteps {
    ...ProductStepsFragment
}

Can anyone explain to me what the ...ProductStepsFragment means ? 

A:

PrismicProductBodySteps would be a custom node type name representing a dynamic series of content blocks. That custom node type name is coming from a Prismic data model; yours will likely be different. 
According to the gatsby-source-prismic documentation, using custom node type names requires you to figure out what they are first: 

The easiest way to get the type of nodes is to use the /___graphql
  debugger and run the below query (adjust the document type and field
  name).

{
  allPrismicPage {
    edges {
      node {
        id
        data {
          body {
            __typename
          }
        }
      }
    }
  }
}

Once you have your custom node type name, you can use a GraphQL fragment to pull data specific to each fragment. Again, this would depend on how you have the fragments defined in your data model, but it would look something like this:
{
  allPrismicHomePage {
    edges {
      node {
        data {
          seo_title
          body {
            __typename
            ... on PrismicYourContentBlockOne {
              text {
                html
              }
            }
            ... on PrismicYourContentBlockTwo {
              text {
                html
              }
            }
            ... on PrismicYourContentBlockThree {
              text {
                html
              }
            }
          }
        }
      }
    }
  }
}

