08/19

[paulapereira1]

Basics and Refreshers

Set Up Sanity.io (the right way this time) Step 1: in our terminal:'

yarn init -y
yarn add express
yarn add stripe

Step 2: still in our terminal:

touch .env
yarn add dotenv

Step 3: to the new .env file, add: STRIPE_SECRET_KEY= insert secret key url from stripe Step 4: back to our terminal:

yarn global add @sanity/cli
sanity init //This will prompt you to login into Sanity.io

Step 5: login in using Google

bk_midterm_sanity project

production

Step 6: back in the terminal:

cd bkmidtermsanity 
sanity install
sanity start

Find sanity page: http://localhost:3333 It will prompt you to login, login using Google again

On the master branch (i.e. midterm_bk), run yarn start

Setting up a GraphQL API for sanity project:

cd into sanity project folder (i.e. bkmidtermsanity)
npx sanity graphql deploy

When prompted, click y for yes Sanity login

Making Queries on GraphQL API: The schemas tab on the right is used to help you find the “path” I.e. Query from allCategory a list of all the names, and URLs for all of the primaryImages and carouselImages

query {
  allCategory{
    name,
    primaryImage{asset{url}},
    carouselImage{asset{url}}
  }
}

i.e. Query a list of the names of every country in the world

query {
 countries{
    name
  } 
}

The exclamation points mean that there will definitely be one or more continents in the array i.e.

continents(...): [Continent!]!

Fetching with GraphQL

const sanityUrl = SANITY_URL
const query = `
  query {
    allCategory {
      _id
      name
      primaryImage {
        assert {
          url
        }
      }
    }
  }
`
const response = await fetch(SANITY_URL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  }
  body: JSON.stringify({ query: sanityQuery })
})
const { data } = await response.json();
console.log(data.allCategory)

• Use Overflow: scroll in CSS to update the cart so that when new items are added to the cart, it doesn’t overflow and instead users can scroll up and down to see their items in the cart; contrary to setting a specific dimension