Interagir avec les données de formulaire à l'aide de Next.js & Hygraph

Hygraph, anciennement connu sous le nom de GraphCMS, est un CMS sans tête qui exploite de nombreux avantages de GraphQL, tels que la prévisibilité, les performances, la vitesse de développement, la stabilité et la flexibilité. Il tire également parti des méthodes avancées du cycle de vie Next.js pour accéder aux données sur le client et toutes les données rendues par le serveur. En utilisant Hygraph combiné à Next.js, vous pouvez créer des PWA, des magasins de commerce électronique, des blogs et des projets d'applications de bureau.

Dans ce didacticiel, nous prendrons la puissance de Next.js et le combinerons avec Hygraph en utilisant Next.js pour créer une API dans notre backend Next.js qui interagira avec les services Hygraph. Nous ferons une requête HTTP dans notre application Next.js que nous pourrons utiliser pour collecter les commentaires soumis par les utilisateurs sur un article de blog et les afficher dans notre tableau de bord Hygraph. Il nous permet de publier ou de supprimer le commentaire dans notre tableau de bord Hygraph. Une fois publié, il s'affichera dans la section des commentaires de notre site de blog.

Pour suivre ce tutoriel, vous devez connaître JavaScript, Next.js et un compte Hygraph . Vous devriez avoir installé node.js.

Configuration de l'hygraphe

Pour créer un compte Hygraph, suivez les instructions ici pour en créer un. Après avoir configuré avec succès un compte Hygraph, cliquez sur le modèle de démarrage de blog . Nous voulons nous concentrer sur la mise en œuvre du formulaire et la capture des soumissions des utilisateurs.

Une fois le projet créé, accédez à « schéma » sur le tableau de bord de votre projet Hygraph et créez un nouveau fichier model. Nommez le modelcommentaire et ajoutez les champs suivants :

• Name- Chaîne, Texte sur une seule ligne et faites-le required.
• Email- Chaîne, Texte sur une seule ligne et faites-le required.
• Comment- Chaîne, texte multiligne, et faites-le required.

Faites défiler vers le bas Referenceet suivez l'image ci-dessous pour définir votre type de référence, référencer votre message, référencer la direction et cliquer sur continuer.

Voici comment le Commentcontenu est structuré.

Mise en place de notre projet Next.js

Commençons par exécuter la commande ci-dessous sur notre terminal :

yarn create next-app --example cms-graphcms cms-graphcms-app && cd cms-graphcms-app

Ou, si vous utilisez NPM, exécutez la commande ci-dessous :

npx create-next-app --example cms-graphcms cms-graphcms-app && cd cms-graphcms-app

Pour le reste du tutoriel, j'utiliserai Yarn.

Ce projet est une application d'une seule page démarrée avec Next.js et Tailwind CSS. Dans le seul but de ce didacticiel, la commande que nous exécutons est un exemple de modèle de blog généré statiquement à l' aide de Next.js et GraphCMS. Cette méthode nous permet de nous concentrer sur la configuration de notre backend et la mise en œuvre de la section des commentaires sur notre blog.

Configuration des rôles et des autorisations

Renommez le .env.local.examplefichier dans ce répertoire en .env.

HYGRAPH_PROJECT_API=
HYGRAPH_PROD_AUTH_TOKEN=
HYGRAPH_DEV_AUTH_TOKEN=
HYGRAPH_PREVIEW_SECRET=

Retournez à Hygraph. Dans le tableau de bord de votre projet, accédez à la page Paramètres > Accès à l'API . Définissez ensuite chaque variable dans .env:

• HYGRAPH_PROJECT_API: définissez-le sur le point de terminaison Content API sous Endpoints en haut de la page.
• HYGRAPH_PROD_AUTH_TOKEN: Copiez le NEXT_EXAMPLE_CMS_GCMS_PROD_AUTH_TOKENjeton sous Jetons d' authentification permanents > Jetons existants , en bas de la page. Cela n'interrogera que le contenu qui est publié.
• HYGRAPH_DEV_AUTH_TOKEN: Copiez le NEXT_EXAMPLE_CMS_GCMS_DEV_AUTH_TOKENjeton sous Jetons d' authentification permanents > Jetons existants en bas de la page. Cela n'interrogera que le contenu qui se trouve dans le brouillon.
• HYGRAPH_PREVIEW_SECRETpeut être n'importe quelle chaîne aléatoire (mais évitez les espaces), comme MY_SECRET- ceci est utilisé pour le mode Aperçu .

Dans votre next.config.js file, remplacez le images.domainpar le code ci-dessous.

// next.config.js
module.exports = {
  images: {
    domains: ['media.graphassets.com'],
  },
}

Dans votre dossier racine, exécutez la commande suivante :

yarn install
yarn dev

Votre blog devrait être opérationnel sur http://localhost:3000 ! Voici à quoi ressemble notre blog.

Interroger les données de Hygraph

Next.js nous permet de créer des API dans notre application Next.js sans créer de serveur Node.js séparé. Ici, nous allons écrire une requête qui ira directement à notre backend Next.js. Créez un nouveau fichier getComment.jsdans le libdossier et ajoutez le code suivant :

// lib/getComment.js

// submit user comment to GraphCMS
export const submitComment = async (obj) => {
  const result = await fetch('/api/comments',{
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(obj),
  })
  return result.json();
}

Ici, nous acceptons les objets de commentaire - objet faisons une requête HTTP à notre backend Next.js. Nous avons fait une demande de récupération à notre /api/comments. Tous les fichiers à l'intérieur du dossier pages/apisont mappés /api/et traités comme un point de terminaison d'API au lieu d'une page.

Construire notre mise en page de formulaire

Dans votre dossier de composants, créez un CommentsForm.jsfichier et ajoutez le code ci-dessous :

// components/CommentsForm.js

import React, { useRef, useState} from 'react';
import { submitComment } from 'lib/getComment';

const CommentsForm = ({ slug }) => {
  const [error, setError] = useState(false);
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  const commentEl = useRef();
  const nameEl = useRef();
  const emailEl = useRef();

  const handleCommentSubmission = () => {
    setError(false);

    const { value: comment } = commentEl.current;
    const { value: name } = nameEl.current;
    const { value: email } = emailEl.current;

    if(!comment || !name || !email) {
      setError(error);
      return
    }

    const commentObj = {
      name, email, comment, slug
    };

    submitComment(commentObj)
      .then((res) => {
        setShowSuccessMessage(true);
        setTimeout(() => {
          setShowSuccessMessage(false);
        }, 3000);
      })
  }
  return (
    <div className='bg-white shadow-lg rounded-lg p-8 pb-12 mb-8 lg:w-1/2 justify-center items-center my-0 mx-auto'>
      <h3 className='text-xl mb-8 font-semibold border-b pb-4'>Leave a Reply</h3>
      <div className='grid grid-cols-1 gap-4 mb-4'>
        <textarea
          ref={commentEl}
          className='p-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700'
          placeholder='Comment'
          name='comment'
        />
      </div>
      <div className='grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4'>
        <input
          type={'text'} 
          ref={nameEl}
          className='py-2 px-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700'
          placeholder='Name'
          name='name'
        />
        <input
          type='email' 
          ref={emailEl}
          className='py-2 px-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700'
          placeholder='Email'
          name='email'
        />
      </div>
      {error && <p className='text-xs text-red-500'>All fields are required.</p>}
      <div className='mt-8'>
        <button type='button' onClick={handleCommentSubmission}
          className='transition duration-500 ease hover:bg-gray-500 inline-block bg-gray-700 text-lg rounded-full text-white py-3 px-8 cursor-pointer'
        >
          Post Comment
        </button>
        {showSuccessMessage && <span className='text-xl float-right font-semibold mt-3 text-green-500'>Comment Submitted for review</span>}
      </div>
    </div>
  )
}
export default CommentsForm;

Dans notre commentForm, nous envoyons le slug de chaque article. Nous avons utilisé le [useRef](https://www.w3schools.com/react/react_useref.asp#:~:text=The%20useRef%20Hook%20allows%20you,access%20a%20DOM%20element%20directly.)crochet car nous ne voulons pas stocker les données dans l'état, mais lire les valeurs du champ de saisie, puis les envoyer à Hygraph. Nous avons également utilisé le [useState](https://reactjs.org/docs/hooks-state.html)crochet pour gérer l'état en cas d'erreur, et nos commentaires sont envoyés avec succès à Hygraph.

Dans pages/[slug].jsle fichier, importez CommentForms.js-le et ajoutez-le dans l' articleélément ci-dessous <Postbody />et transmettez-le slugen tant que props.

// pages/[slug].js
import CommentsForm from 'components/CommentsForm'

export default function Post({ post, morePosts, preview }) {
  /*  */
  <CommentsForm slug={post.slug} />
  /*  */
}

Voici à quoi ressemble notre formulaire de commentaires :

Création de notre API en Nextjs pour interagir avec Hygraph

Dans notre pages/api, créez un nouveau fichier comments.jset ajoutez le code ci-dessous :

// pages/api/comments.js

import { GraphQLClient, gql } from 'graphql-request';

const graphqlAPI = process.env.HYGRAPH_PROJECT_API;

// export a default function for API route to work
export default async function comments(req, res) {
  const graphQLClient = new GraphQLClient((graphqlAPI), {
    headers: {
      authorization: `Bearer ${process.env.HYGRAPH_DEV_AUTH_TOKEN}`,
    },
  });
  const query = gql`
    mutation CreateComment($name: String!, $email: String!, $comment: String!, $slug: String!) {
      createComment(data: {name: $name, email: $email, comment: $comment, post: {connect: {slug: $slug}}}) { id }
    }
  `;
  const result = await graphQLClient.request(query, {
    name: req.body.name,
    email: req.body.email,
    comment: req.body.comment,
    slug: req.body.slug,
  });
  return res.status(200).send(result);
}

Comme vous l'avez peut-être remarqué, nous importons GraphQLClientet gqldepuis des fichiers graphql-request. Pour ajouter ces dépendances, exécutez la commande ci-dessous dans votre terminal.

yarn add graphql graphql-request

GraphQLClientnous permet de publier des données sur Hygraph. Nous avons mis en place GraphQLClienten spécifiant l'en-tête d'autorisation avec HYGRAPH_DEV_AUTH_TOKENfrom Hygraph. Cela aidera à autoriser le GraphQLClient. Nous avons également créé une requête de mutation qui nous aidera à ajouter de nouvelles données - de nouveaux commentaires. Nous l'utilisons également pour nous connecter à un article spécifique que l'utilisateur a commenté en spécifiant l'extension slug.

Application en action

Rendez-vous maintenant sur notre article de blog et commentez.

Rendez-vous sur Hygraph, et nous verrons notre commentaire, et il a été enregistré en tant que brouillon. Alors soit on le publie, soit on le supprime.

Affichage des commentaires des utilisateurs

Dans cette section, nous verrons comment afficher le commentaire de l'utilisateur pour chaque message spécifique après sa publication sur notre front-end.

Dans le lib/getComment.jsfichier, importez requestet gqldepuis graphql-requestet utilisez-les pour récupérer les name, commentet les datecommentaires de l'utilisateur sur le billet de blog.

// lib/getComment.js

import { request, gql } from "graphql-request";

const graphqlAPI = "Your api key"

// getting post comments
export const getComments = async (slug) =>   {
    const query = gql`
        query GetComments($slug: String!) {
            comments(where: { post: { slug: $slug } }) {
                name
                createdAt
                comment
            }
        }
    `
    const result = await request(graphqlAPI,query, { slug });
    return result.comments;
}

Dans notre componentsdossier, créez un Comments.jsfichier et ajoutez le code ci-dessous :

// components/Comments.js

import React, { useEffect, useState } from 'react'
import  parse  from 'html-react-parser';
import { getComments } from 'lib/getComment';

const Comments = ({ slug }) => {
  const [comments, setComments ] = useState([]);
  useEffect(() => {
      getComments(slug)
        .then((result) => setComments(result))
  }, [])
  return (
    <>
      {comments.length > 0 && (
        <div className='bg-white shadow-lg rounded-lg p-8 pb-12 mb-8'>
          <h3 className='text-xl mb-8 font-semibold border-b pb-4'>
            {comments.length}
            {''}
            Comments
          </h3>
          {comments.map((comment) => (
            <div key={comment.createdAt} className='border-b border-gray-100 mb-4 pb-4'>
              <p className='mb-4'>
                <span className='font-semibold'>{comment.name}</span>
                {''}
                on
                {''}
                {new Date(comment.createdAt).toLocaleDateString(undefined, {
                      day:   'numeric',
                      month: 'short',
                      year:  'numeric',
                  })}
              </p>
              <p className='whitespace-pre-line text-gray-600 w-full'>{parse(comment.comment)}</p>
            </div>
          ))}
        </div>
      )}
    </>
  )
}
export default Comments;

Nous avions l'habitude useEffectde recevoir les commentaires nouvellement ajoutés. Installez html-react-parseren exécutant la commande ci-dessous :

yarn add html-react-parser

Dans pages/[slug].jsle fichier, importez Comment.js-le et ajoutez-le dans l' articleélément ci-dessous <CommentsForm />et transmettez-le en slugtant que prop.

// pages/[slug].js

import Comments from 'components/Comments'

export default function Post({ post, morePosts, preview }) {
  /*   */
  <Comments slug={post.slug} />
  /*   */
}

Voici à quoi ressemble notre formulaire de commentaires :

Conclusion

Dans cet article, nous avons montré comment implémenter une section de commentaires à l'aide de Next.js. Nous avons examiné comment créer une API dans notre backend Next.js qui interagira avec Hygraph. Nous avons également examiné comment configurer Hygraph, envoyer et récupérer des données à l'aide de Next.js et GraphQL depuis Hygraph.

Hygraph est l'un des meilleurs systèmes de gestion de contenu GraphQL. Hygraph est un excellent outil qui permet une intégration transparente avec n'importe quelle application.

Lien : https://blog.openreplay.com/interacting-with-form-data-using-next-js-and-hygraph

#hygraph #nextjs #reatcjs

What is GEEK

Buddha Community

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

• Fast startup without relying on a custom version of Node.js.
• Small artifact (current size is around 1.2MB).
• First class macros.
• Support building small TUI apps using Reagent.
• Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

• destructuring using :syms
• property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

• c64core: retrocompute aesthetics twitter bot
• gallery.cljs: script to download walpapers from windowsonearth.org.
• nbb-action-example: example of a Github action built with nbb.

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

• babashka >= 0.4.0
• Clojure CLI >= 1.10.3.933
• Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

• Clone and cd into this repo
• bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Interagir avec les données de formulaire à l'aide de Next.js & Hygraph

Hygraph, anciennement connu sous le nom de GraphCMS, est un CMS sans tête qui exploite de nombreux avantages de GraphQL, tels que la prévisibilité, les performances, la vitesse de développement, la stabilité et la flexibilité. Il tire également parti des méthodes avancées du cycle de vie Next.js pour accéder aux données sur le client et toutes les données rendues par le serveur. En utilisant Hygraph combiné à Next.js, vous pouvez créer des PWA, des magasins de commerce électronique, des blogs et des projets d'applications de bureau.

Dans ce didacticiel, nous prendrons la puissance de Next.js et le combinerons avec Hygraph en utilisant Next.js pour créer une API dans notre backend Next.js qui interagira avec les services Hygraph. Nous ferons une requête HTTP dans notre application Next.js que nous pourrons utiliser pour collecter les commentaires soumis par les utilisateurs sur un article de blog et les afficher dans notre tableau de bord Hygraph. Il nous permet de publier ou de supprimer le commentaire dans notre tableau de bord Hygraph. Une fois publié, il s'affichera dans la section des commentaires de notre site de blog.

Pour suivre ce tutoriel, vous devez connaître JavaScript, Next.js et un compte Hygraph . Vous devriez avoir installé node.js.

Configuration de l'hygraphe

Pour créer un compte Hygraph, suivez les instructions ici pour en créer un. Après avoir configuré avec succès un compte Hygraph, cliquez sur le modèle de démarrage de blog . Nous voulons nous concentrer sur la mise en œuvre du formulaire et la capture des soumissions des utilisateurs.

Une fois le projet créé, accédez à « schéma » sur le tableau de bord de votre projet Hygraph et créez un nouveau fichier model. Nommez le modelcommentaire et ajoutez les champs suivants :

• Name- Chaîne, Texte sur une seule ligne et faites-le required.
• Email- Chaîne, Texte sur une seule ligne et faites-le required.
• Comment- Chaîne, texte multiligne, et faites-le required.

Faites défiler vers le bas Referenceet suivez l'image ci-dessous pour définir votre type de référence, référencer votre message, référencer la direction et cliquer sur continuer.

Voici comment le Commentcontenu est structuré.

Mise en place de notre projet Next.js

Commençons par exécuter la commande ci-dessous sur notre terminal :

yarn create next-app --example cms-graphcms cms-graphcms-app && cd cms-graphcms-app

Ou, si vous utilisez NPM, exécutez la commande ci-dessous :

npx create-next-app --example cms-graphcms cms-graphcms-app && cd cms-graphcms-app

Pour le reste du tutoriel, j'utiliserai Yarn.

Ce projet est une application d'une seule page démarrée avec Next.js et Tailwind CSS. Dans le seul but de ce didacticiel, la commande que nous exécutons est un exemple de modèle de blog généré statiquement à l' aide de Next.js et GraphCMS. Cette méthode nous permet de nous concentrer sur la configuration de notre backend et la mise en œuvre de la section des commentaires sur notre blog.

Configuration des rôles et des autorisations

Renommez le .env.local.examplefichier dans ce répertoire en .env.

HYGRAPH_PROJECT_API=
HYGRAPH_PROD_AUTH_TOKEN=
HYGRAPH_DEV_AUTH_TOKEN=
HYGRAPH_PREVIEW_SECRET=

Retournez à Hygraph. Dans le tableau de bord de votre projet, accédez à la page Paramètres > Accès à l'API . Définissez ensuite chaque variable dans .env:

• HYGRAPH_PROJECT_API: définissez-le sur le point de terminaison Content API sous Endpoints en haut de la page.
• HYGRAPH_PROD_AUTH_TOKEN: Copiez le NEXT_EXAMPLE_CMS_GCMS_PROD_AUTH_TOKENjeton sous Jetons d' authentification permanents > Jetons existants , en bas de la page. Cela n'interrogera que le contenu qui est publié.
• HYGRAPH_DEV_AUTH_TOKEN: Copiez le NEXT_EXAMPLE_CMS_GCMS_DEV_AUTH_TOKENjeton sous Jetons d' authentification permanents > Jetons existants en bas de la page. Cela n'interrogera que le contenu qui se trouve dans le brouillon.
• HYGRAPH_PREVIEW_SECRETpeut être n'importe quelle chaîne aléatoire (mais évitez les espaces), comme MY_SECRET- ceci est utilisé pour le mode Aperçu .

Dans votre next.config.js file, remplacez le images.domainpar le code ci-dessous.

// next.config.js
module.exports = {
  images: {
    domains: ['media.graphassets.com'],
  },
}

Dans votre dossier racine, exécutez la commande suivante :

yarn install
yarn dev

Votre blog devrait être opérationnel sur http://localhost:3000 ! Voici à quoi ressemble notre blog.

Interroger les données de Hygraph

Next.js nous permet de créer des API dans notre application Next.js sans créer de serveur Node.js séparé. Ici, nous allons écrire une requête qui ira directement à notre backend Next.js. Créez un nouveau fichier getComment.jsdans le libdossier et ajoutez le code suivant :

// lib/getComment.js

// submit user comment to GraphCMS
export const submitComment = async (obj) => {
  const result = await fetch('/api/comments',{
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(obj),
  })
  return result.json();
}

Ici, nous acceptons les objets de commentaire - objet faisons une requête HTTP à notre backend Next.js. Nous avons fait une demande de récupération à notre /api/comments. Tous les fichiers à l'intérieur du dossier pages/apisont mappés /api/et traités comme un point de terminaison d'API au lieu d'une page.

Construire notre mise en page de formulaire

Dans votre dossier de composants, créez un CommentsForm.jsfichier et ajoutez le code ci-dessous :

// components/CommentsForm.js

import React, { useRef, useState} from 'react';
import { submitComment } from 'lib/getComment';

const CommentsForm = ({ slug }) => {
  const [error, setError] = useState(false);
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  const commentEl = useRef();
  const nameEl = useRef();
  const emailEl = useRef();

  const handleCommentSubmission = () => {
    setError(false);

    const { value: comment } = commentEl.current;
    const { value: name } = nameEl.current;
    const { value: email } = emailEl.current;

    if(!comment || !name || !email) {
      setError(error);
      return
    }

    const commentObj = {
      name, email, comment, slug
    };

    submitComment(commentObj)
      .then((res) => {
        setShowSuccessMessage(true);
        setTimeout(() => {
          setShowSuccessMessage(false);
        }, 3000);
      })
  }
  return (
    <div className='bg-white shadow-lg rounded-lg p-8 pb-12 mb-8 lg:w-1/2 justify-center items-center my-0 mx-auto'>
      <h3 className='text-xl mb-8 font-semibold border-b pb-4'>Leave a Reply</h3>
      <div className='grid grid-cols-1 gap-4 mb-4'>
        <textarea
          ref={commentEl}
          className='p-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700'
          placeholder='Comment'
          name='comment'
        />
      </div>
      <div className='grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4'>
        <input
          type={'text'} 
          ref={nameEl}
          className='py-2 px-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700'
          placeholder='Name'
          name='name'
        />
        <input
          type='email' 
          ref={emailEl}
          className='py-2 px-4 outline-none w-full rounded-lg focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700'
          placeholder='Email'
          name='email'
        />
      </div>
      {error && <p className='text-xs text-red-500'>All fields are required.</p>}
      <div className='mt-8'>
        <button type='button' onClick={handleCommentSubmission}
          className='transition duration-500 ease hover:bg-gray-500 inline-block bg-gray-700 text-lg rounded-full text-white py-3 px-8 cursor-pointer'
        >
          Post Comment
        </button>
        {showSuccessMessage && <span className='text-xl float-right font-semibold mt-3 text-green-500'>Comment Submitted for review</span>}
      </div>
    </div>
  )
}
export default CommentsForm;

Dans notre commentForm, nous envoyons le slug de chaque article. Nous avons utilisé le [useRef](https://www.w3schools.com/react/react_useref.asp#:~:text=The%20useRef%20Hook%20allows%20you,access%20a%20DOM%20element%20directly.)crochet car nous ne voulons pas stocker les données dans l'état, mais lire les valeurs du champ de saisie, puis les envoyer à Hygraph. Nous avons également utilisé le [useState](https://reactjs.org/docs/hooks-state.html)crochet pour gérer l'état en cas d'erreur, et nos commentaires sont envoyés avec succès à Hygraph.

Dans pages/[slug].jsle fichier, importez CommentForms.js-le et ajoutez-le dans l' articleélément ci-dessous <Postbody />et transmettez-le slugen tant que props.

// pages/[slug].js
import CommentsForm from 'components/CommentsForm'

export default function Post({ post, morePosts, preview }) {
  /*  */
  <CommentsForm slug={post.slug} />
  /*  */
}

Voici à quoi ressemble notre formulaire de commentaires :

Création de notre API en Nextjs pour interagir avec Hygraph

Dans notre pages/api, créez un nouveau fichier comments.jset ajoutez le code ci-dessous :

// pages/api/comments.js

import { GraphQLClient, gql } from 'graphql-request';

const graphqlAPI = process.env.HYGRAPH_PROJECT_API;

// export a default function for API route to work
export default async function comments(req, res) {
  const graphQLClient = new GraphQLClient((graphqlAPI), {
    headers: {
      authorization: `Bearer ${process.env.HYGRAPH_DEV_AUTH_TOKEN}`,
    },
  });
  const query = gql`
    mutation CreateComment($name: String!, $email: String!, $comment: String!, $slug: String!) {
      createComment(data: {name: $name, email: $email, comment: $comment, post: {connect: {slug: $slug}}}) { id }
    }
  `;
  const result = await graphQLClient.request(query, {
    name: req.body.name,
    email: req.body.email,
    comment: req.body.comment,
    slug: req.body.slug,
  });
  return res.status(200).send(result);
}

Comme vous l'avez peut-être remarqué, nous importons GraphQLClientet gqldepuis des fichiers graphql-request. Pour ajouter ces dépendances, exécutez la commande ci-dessous dans votre terminal.

yarn add graphql graphql-request

GraphQLClientnous permet de publier des données sur Hygraph. Nous avons mis en place GraphQLClienten spécifiant l'en-tête d'autorisation avec HYGRAPH_DEV_AUTH_TOKENfrom Hygraph. Cela aidera à autoriser le GraphQLClient. Nous avons également créé une requête de mutation qui nous aidera à ajouter de nouvelles données - de nouveaux commentaires. Nous l'utilisons également pour nous connecter à un article spécifique que l'utilisateur a commenté en spécifiant l'extension slug.

Application en action

Rendez-vous maintenant sur notre article de blog et commentez.

Rendez-vous sur Hygraph, et nous verrons notre commentaire, et il a été enregistré en tant que brouillon. Alors soit on le publie, soit on le supprime.

Affichage des commentaires des utilisateurs

Dans cette section, nous verrons comment afficher le commentaire de l'utilisateur pour chaque message spécifique après sa publication sur notre front-end.

Dans le lib/getComment.jsfichier, importez requestet gqldepuis graphql-requestet utilisez-les pour récupérer les name, commentet les datecommentaires de l'utilisateur sur le billet de blog.

// lib/getComment.js

import { request, gql } from "graphql-request";

const graphqlAPI = "Your api key"

// getting post comments
export const getComments = async (slug) =>   {
    const query = gql`
        query GetComments($slug: String!) {
            comments(where: { post: { slug: $slug } }) {
                name
                createdAt
                comment
            }
        }
    `
    const result = await request(graphqlAPI,query, { slug });
    return result.comments;
}

Dans notre componentsdossier, créez un Comments.jsfichier et ajoutez le code ci-dessous :

// components/Comments.js

import React, { useEffect, useState } from 'react'
import  parse  from 'html-react-parser';
import { getComments } from 'lib/getComment';

const Comments = ({ slug }) => {
  const [comments, setComments ] = useState([]);
  useEffect(() => {
      getComments(slug)
        .then((result) => setComments(result))
  }, [])
  return (
    <>
      {comments.length > 0 && (
        <div className='bg-white shadow-lg rounded-lg p-8 pb-12 mb-8'>
          <h3 className='text-xl mb-8 font-semibold border-b pb-4'>
            {comments.length}
            {''}
            Comments
          </h3>
          {comments.map((comment) => (
            <div key={comment.createdAt} className='border-b border-gray-100 mb-4 pb-4'>
              <p className='mb-4'>
                <span className='font-semibold'>{comment.name}</span>
                {''}
                on
                {''}
                {new Date(comment.createdAt).toLocaleDateString(undefined, {
                      day:   'numeric',
                      month: 'short',
                      year:  'numeric',
                  })}
              </p>
              <p className='whitespace-pre-line text-gray-600 w-full'>{parse(comment.comment)}</p>
            </div>
          ))}
        </div>
      )}
    </>
  )
}
export default Comments;

Nous avions l'habitude useEffectde recevoir les commentaires nouvellement ajoutés. Installez html-react-parseren exécutant la commande ci-dessous :

yarn add html-react-parser

Dans pages/[slug].jsle fichier, importez Comment.js-le et ajoutez-le dans l' articleélément ci-dessous <CommentsForm />et transmettez-le en slugtant que prop.

// pages/[slug].js

import Comments from 'components/Comments'

export default function Post({ post, morePosts, preview }) {
  /*   */
  <Comments slug={post.slug} />
  /*   */
}

Voici à quoi ressemble notre formulaire de commentaires :

Conclusion

Dans cet article, nous avons montré comment implémenter une section de commentaires à l'aide de Next.js. Nous avons examiné comment créer une API dans notre backend Next.js qui interagira avec Hygraph. Nous avons également examiné comment configurer Hygraph, envoyer et récupérer des données à l'aide de Next.js et GraphQL depuis Hygraph.

Hygraph est l'un des meilleurs systèmes de gestion de contenu GraphQL. Hygraph est un excellent outil qui permet une intégration transparente avec n'importe quelle application.

Lien : https://blog.openreplay.com/interacting-with-form-data-using-next-js-and-hygraph

#hygraph #nextjs #reatcjs

Google analytics Setup with Next JS, React JS using Router Events - 14

In this video, we are going to implement Google Analytics to our Next JS application. Tracking page views of an application is very important.

Google analytics will allow us to track analytics information.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #js #react js #react #next #google analytics

Laravel API and React Next JS frontend development - 28

In this video, I wanted to touch upon the functionality of adding Chapters inside a Course. The idea was to not think much and start the development and pick up things as they come.

There are places where I get stuck and trying to find answers to it up doing what every developer does - Google and get help. I hope this will help you understand the flow and also how developers debug while doing development.

App url: https://video-reviews.vercel.app
Github code links below:
Next JS App: https://github.com/amitavroy/video-reviews
Laravel API: https://github.com/amitavdevzone/video-review-api

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #api #react next js #next #frontend #development

Next js Tutorial For Beginners

Next js Tutorial For Beginners is the today’s topic. It is no secret that creating single-page applications can be immensely challenging these days. But with the help of some libraries, frameworks, and tools, it is effortless nowadays. React.js is the common frontend libraries among the Front-end developers. Its virtual dom theory makes React faster and gives us the better application performance. Now, one problem is that Single Page Applications are not at all SEO  friendly because it is rendered on the Client side  and not Server side . So when the Search Engine crawlers try to send a request, they cannot get our meta content or description and not even the main content. Search Engines do not care about how your app is architected or whatever ideology was used to adjust and fetch the right material. Their bots are not as smart as using your apps as a real user would. All they care about is that once they send their spiders to crawl and index your site, whatever the server provides on the first request is what gets indexed. In our case, all they get is our div tag with an id and bundled JS file, and we can not index our website correctly. So some how, we need a SSR to tackle this problem and in React js, Next.js is the perfect solution.

#js #react.js #next.js