Bagaimana menerapkan magneto GraphQl Apis menggunakan NextJS – Beragampengetahuan

Awalnya kami bekerja untuk mengimplementasikan useForm() Hook | React di NextJS. Sekarang kami sedang mengimplementasikan Magento GraphQl Api menggunakan NextJS. Namun sebelum itu, kita perlu menyiapkan Apollo Client untuk mengelola GraphQl Api.
Klien Apollo adalah klien manajemen keadaan yang memungkinkan pengguna untuk mengelola data lokal dan jarak jauh menggunakan GraphQl, Anda dapat menggunakannya untuk menyimpan, mengambil, dan memodifikasi data aplikasi.

Langkah 1: Instal Klien Apollo

Jalankan perintah ini di terminal Anda untuk menginstal klien Apollo.

npm install @apollo/client graphql

Ini akan menambahkan Klien Apollo dan GraphQl, yang kita perlukan untuk mengimplementasikan kueri GraphQl.

Langkah 2: Siapkan Klien Apollo di NextJS .

membuat file “lib/apolloClient.js” Digunakan untuk menyimpan konfigurasi klien Apollo. Di dalamnya kita akan membuat fungsi dasar yang mengembalikan instance Klien Apollo.

 import { useMemo } from "react";
 import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";

 let apolloClient;

 function createApolloClient() {
   return new ApolloClient({
     ssrMode: typeof window === "undefined", // set to true for SSR
     link: new HttpLink({
       uri: "YOUR MAGENTO-ENDPOINTS",
     }),
     cache: new InMemoryCache(),
   });
 }

• Mode SSR true memungkinkan untuk mencegah Klien Apollo mengambil ulang kueri yang tidak perlu, jadi kami menyetel ssrMode harus disetel ke true saat menggunakan SSR (rendering sisi server) untuk melakukan pra-render halaman, tetapi harus disetel ke false saat merender klien. Untuk mencapai ini, kami menggunakan objek typeof window untuk menentukan secara unik apakah Klien Apollo berjalan di sisi klien atau server.
• sekarang kita punya Buat ApolloClient() Fungsi yang mengembalikan instance Klien Apollo untuk konfigurasi tertentu. Klien Apollo akan membuat instance baru untuk setiap halaman.Oleh karena itu, kita akan membuat sebuah fungsi inisialisasi apollo() ini disebut Buat ApolloClient() fungsi membuat klien baru jika tidak keluar kecuali kita menggabungkan cache Apollo dengan initialState (initialState !== null) yang merupakan nilai cache Apollo yang diteruskan di inisialisasiApollo() Fungsi.

export function initializeApollo(initialState = null) {

    const _apolloClient = apolloClient ?? createApolloClient();

    /* If your page has Next.js data fetching methods that use Apollo Client, the initial stategets hydrated here*/ 

    if (initialState) {
        // Get existing cache, loaded during client side data fetching
        const existingCache = _apolloClient.extract();

    /* Restore the cache using the data passed from  
getStaticProps/getServerSideProps combined with the existing 
    cached data */
      _apolloClient.cache.restore({ ...existingCache, ...initialState});
    }
    // For SSG and SSR always create a new Apollo Client
    if (typeof window === 'undefined') return _apolloClient;
    // Create the Apollo Client once in the client
    if (!apolloClient) apolloClient = _apolloClient;

    return _apolloClient;
}

Kami ingin memperbarui instance klien Apollo hanya ketika nilai yang di-cache berubah
Untuk ini kita akan menggunakan menggunakan memo() kait. Kami membuat fungsi useApollo() yang mengembalikan nilai memori klien Apollo().

export function useApollo(initialState) {
    const store = 
    useMemo(() => initializeApollo(initialState),[initialState]);
    return store;
}

Ekspor klien untuk digunakan oleh SSR.

export const client = initializeApollo();

Langkah 3: Lewati Klien Apollo di Penyedia Apollo

import { ApolloProvider } from "@apollo/client"
import {useApollo} from "../lib/apollo-client"

export default function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps.initialApolloState);
  return (
     <ApolloProvider client={apolloClient}>
       <Component {...pageProps} />
     </ApolloProvider>
  )
}

Secara keseluruhan sekarang kita sudah selesai menyiapkan Klien Apollo dan kita akan melanjutkan untuk mengerjakan GraphQl Api. Namun sebelum Anda mulai menggunakan GraphQl Api, Anda perlu memahami dasar-dasar GraphQl, Anda dapat mengunjungi GraphQl Api, saya juga memberikan panduan dasar di bawah ini.

Kueri dan mutasi GraphQl.
Untuk menggunakan GraphQl Api, kita harus memahami konsep-konsep berikut
mutasi dan query.
bertanya : Digunakan untuk mendapatkan data, mirip dengan metode GET di REST API.
mutasi : Ini digunakan untuk mengubah data, seperti metode POST, DELETE dan PUT di REST API.

// Query example
query Countries {
  country {
    // defining return data
    name 
    code
  }
}

// Mutation example
mutation loginUser($userName: String!, $password: String!) {
  login(username: $userName, password: $password) {
    // defining return data
    id
    email
    firstname
    outlet_id
    lastname
    filename
    user_cart_item_list
  }
}

Sekarang setelah kami menyelesaikan klien apollo dan panduan dasar GraphQl, yang tersisa hanyalah mengimplementasikan Magento GraphQl Api menggunakan Formulir kami.

Implementasikan Magento GraphQl Api menggunakan NextJS

Mutasi untuk membuat alamat pelanggan.
Dalam mutasi ini Anda juga perlu menentukan skema atau Anda dapat mengatakan jenis nilai input Buat alamat pelangganuntuk ini Anda mengikuti dokumen atau blog ini Skema Dasar dan Jenis

mutation Create_Customer_Address($input: Create_Customer_Input!) {
  createCustomerAddress(createCustomerAddressData: $input) {
    id
    region {
      region
      region_code
    }
    country_code
    street
    telephone
    postcode
    city
    default_shipping
    default_billing
  }
}

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import Create_Customer_Address from "../api/createCustomerAddress.graphql"

const LoginForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }, reset
  } = useForm();

  const [formData, setFormData] = useState({});
  const [customerLogin, {data,error,loading] =   useMutation(Create_Customer_Address);

  const formSubmit = (data) => {
    setFormData( {...data} );
    customerLogin(
     variables: {input: formData},)
  };


   useEffect(() => {
       if(data) {
       alert("Customer Address is successfully created")
       reset();
   }
 },[loading])

  return (
    <form onSubmit={handleSubmit(formSubmit)}>
      <div className="form-container">
        <label className="label">Account Information</label>
        <input
          {...register("firstName", { required: true })}
          placeholder="First name"
        />

        {errors.firstName && <p className="error">First Name is required.</p>}

        <input
          {...register("lastName", { required: true, minLength: 2 })}
          placeholder="Last name"
        />

        {errors.lastName && <p className="error">Last Name is required.</p>}
        <input
          {...register("company", { required: true })}
          placeholder="Company"
        />

        <input
          type="email"
          {...register("email", { required: true })}
          placeholder="Email"
        />
        {errors.email && <p className="error">Email address is required.</p>}

        <input
          type="tel"
          {...register("phone", { required: true, valueAsNumber: true })}
          placeholder="Phone Number"
        />
        {errors.phone && <p className="error">Phone Number is required.</p>}

        <label className="label">Address</label>

        <input
          {...register("address", { required: true })}
          placeholder="Street Address"
        />
        {errors.address && <p className="error">Street Address is required.</p>}

        <input {...register("addressL2")} placeholder="Street Address 2" />
        <input {...register("addressL3")} placeholder="Street Address 3" />

        {/* <input type="date"  {...register("date", )} placeholder="date" />  */}

        <input {...register("city", { required: true })} placeholder="City" />
        {errors.city && <p className="error">City name is required.</p>}

        <input
          {...register("zip", { required: true, valueAsNumber: true })}
          placeholder="Zip"
        />
        {errors.zip && <p className="error">Zip Code is required.</p>}

        <input
          type="text"
          {...register("country", { required: true })}
          placeholder="Country"
        />
        {errors.country && <p className="error">Country name is required.</p>}

        <input
          {...register("state", { required: true })}
          placeholder="State/Province"
        />
        {errors.country && <p className="error">State/Province is required.</p>}
      </div>

      <div className="formData">
        <input className="btn" type="submit" value="Save" />
        <div className="formValues">
          <p className="values">{formData.firstName}</p>
          <p className="values">{formData.lastName}</p>
          <p className="values">{formData.company}</p>
          <p className="values">{formData.email}</p>
          <p className="values">{formData.phone}</p>
          <p className="values">
            {formData.address} {formData.addressL2} {formData.addressL3}    {" "}
          </p>
          <p className="values">{formData.city}</p>
          <p className="values">{formData.zip}</p>
          <p className="values">{formData.country}</p>
          <p className="values">{formData.state}</p>
        </div>
      </div>
    </form>
  );
};

export default LoginForm;

Di sini kita bermutasi Buat alamat pelanggan Di dalamnya kami mengirimkan data pengguna dan setelah berhasil memanggil mutasi kami memanggil alarm() Dan setel ulang metode bidang, yang menunjukkan bahwa data pengguna telah berhasil ditambahkan.
Permintaan untuk mendapatkan detail pelanggan.
Dalam kueri ini, kami mendapatkan detail pelanggan.kami akan menggunakan gunakan kueri() kait untuk mengeksekusi kueri kami.

query Get_Customer_Details{
  customer {
    firstname
    middlename
    lastname
    suffix
    prefix
    gender
    date_of_birth
    taxvat
    created_at
    default_shipping
    default_billing
    email
    is_subscribed
    addresses {
      firstname
      lastname
      street
      city
      region {
        region_code
        region
      }
      postcode
      vat_id
      country_code
      telephone
      company
    }
  }
}

import React from 'react'
import { useQuery } from '@apollo/client'
import Get_Customer_Details from "../api/query/getCustomerDetail.graphql";

const CustomerDetails = () => {

    const {data, loading, error} = useQuery(Get_Customer_Details)

  return (
     <React.Fragment>
    {loading ? (<h1>Loading</h1>) : (
      <h1>{`${data.customer.firstname} ${data.customer.lastname}`}</h1>
    )}
    </React.Fragment>
  )
}

export default CustomerDetails;

Jadi beginilah cara Anda mengimplementasikan Magento GraphQl Api dengan NextJS,
Nantikan pembaruan lainnya.

Selamat membuat kode!

vishal.handa658
0 lencana

13 Februari 2023