Create data relationship between TAGS and Lillian's photos of projects   🔧

My Skill Building Session:

data-relationships

What did I do?

Create data relationship between TAGS and Lillian's photos of projects.

Why did I do it?

To make it easier for Lillian to ship her projects to friends.

How did I do it?

The Plan

S - See: toppings are not on pizzas in GraphQL
A - Array: Add array to pizza.js in Sanity

N - Nodes: toppings are now on pizzas in GraphQL

Look at these steps later:

I - Into my webapp with GraphQL

T - Treasure: TBD
Y - Yeah: Toppings can be linked in my web app after copy-pasting some Wes Bos wizardry.

The Steps

S - See: toppings are not on pizzas in GraphQL or in GraphiQL

// ToppingsFilter.js
// How do I get a list of all the pizzas with their toppings?
const { pizzas } = useStaticQuery(graphql`
  query {
    pizzas: allSanityPizza {
      nodes {
        // 👁️ Look no "toppings" here 👀
        id
      }
      slug {
        current
      }
    }
  }
}`);

A - Array: Add array to pizza.js in Sanity

I added this code to my pizza.js. in Sanity

// schemas/pizza.js
  {
    name: 'toppings',
    title: 'Toppings and Tools and Tags of Pirate Princess Lillian (6 🏴‍☠️👸)',
    type: 'array',
    of: [{ type: 'reference', to: [{ type: 'topping' }] }],
  }

N - Nodes: toppings are now on pizzas in GraphQL

I looked in my GraphiQL and copy-pasted the new query into ToppingsFilter.js

// Rubys-TimeShip/src/components/ToppingsFilter.js
// This is how do I get a list of all the Pizzas with their toppings!
const { pizzas } = useStaticQuery(graphql`
  query {
    pizzas: allSanityPizza {
      nodes {
        toppings {
          name
          id
        }
        slug {
          current
        }
        id
      }
    }
  }
`);

And that's enough steps for this week!

Pirate Princess Lillian joined me at the beginning of Sunday's skill building session on youtube.

If you would like to see how the web app will look in the end jump to the 20 minute mark.

💪😺👍
Keep your skill-building-submarine afloat this week!
⛵🔧🏴‍☠️

 
Cap'n Ola Vea

 
PS: If you feel like doing me a favour give me a smiley emoji comment to feed my youtube algo some vitamins.

Stuck on a reef in the sharky waters around the Gatsby islands?

Book a 1-on-1 Gatsby Call with Queen Raae. Friendly advice you can put into action immediately, guaranteed!

Serious about Gatsby? Sign up for emails sent every weekday to help you get the most out of Gatsby!