gitlherme/aulao-heart

Figma

Figma

Criar projeto

• Criar projeto com npx create-next-app blog --ts --use-npm

---

Instalar dependências

• GraphQL
• GraphQL Request
• Tailwind CSS

npm install graphql-request graphql
npm install -D tailwindcss postcss autoprefixer

---

Configurar Tailwind

• Criar arquivo de config do tailwind

npx tailwindcss init -p

• Editar arquivo de config com o necessário

content: [
  "./src/pages/**/*.{js,ts,jsx,tsx}",
],

• Importar tailwind no nosso arquivo globals.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Hygraph

• Criar conta na Hygraph
• Criar um Schema Post (Content Type)
  • Title
  • Headline
  • Slug
  • Content
  • Author
• Criar um Content do tipo Post

Criar configuracao do GraphQL

• Dentro da pasta services, criar um hygraph.ts.

// hygraph.ts
import { GraphQLClient } from 'graphql-request';
export const hygraph = new GraphQLClient(
  'LINK PARA O SEU CONTENT PUBLIC URL'
);

Criar página de post list

• Requisitar todos os posts

export const getStaticProps: GetStaticProps = async () => {
  const query = gql`
    {
      posts {
        title,
        headline,
      }
    }
  `
  const { posts } = await hygraph.request(query)
  const { title, headline } = posts
  return {
    props: {
      title,
      headline
    },
  }
}

Criar página de post

• Requisitar post especifico

export const getStaticProps: GetStaticProps = async ({ params }) => {
  
  const query = gql`
      {
        post(where: {slug: "${params?.slug}"}) {
          title
          content {
            html
          }
        }
      }
    `
  const { post } = await hygraph.request(query)
  const { title, content } = post
  return {
    props: {
      title,
      content,
    }
  }
}

Materiais de Apoio

1. getStaticProps and getServerSideProps | What’s the Difference?
2. What is getStaticPaths() in Nextjs?
3. REST vs GraphQL APIs, the Good, the Bad, the Ugly