GraphQL با NEXT JS – DEV Community

سلام به همه امروز من در مورد GraphQL API با Next JS بحث خواهم کرد.

GraphQL یک زبان پرس و جو و زمان اجرا منبع باز برای API ها (Application Programming Interface) است. این یک رویکرد منعطف و کارآمد برای مشتریان برای درخواست و دستکاری داده ها از یک سرور فراهم می کند. GraphQL توسط فیسبوک توسعه داده شد و در سال 2015 برای عموم منتشر شد.

برخلاف API های REST سنتی، که در آن کلاینت ها اغلب ساختارهای داده ثابت تعیین شده توسط سرور را دریافت می کنند، GraphQL به مشتریان اجازه می دهد تا شکل و ساختار داده های مورد نیاز خود را تعریف کنند. کلاینت ها می توانند یک درخواست واحد را به سرور ارسال کنند و نیازهای دقیق داده را مشخص کنند و پاسخی را دریافت کنند که مطابق با ساختار درخواستی باشد. این مشکل واکشی بیش از حد یا کم واکشی داده ها را از بین می برد، جایی که مشتریان داده های بیشتری یا کمتر از آنچه واقعاً نیاز دارند دریافت می کنند.

در اینجا یک راهنمای گام به گام برای انجام عملیات CRUD با GraphWL، Express JS، MongoDB و NEXT JS آمده است –

این ساختار پوشه ما خواهد بود

- project/
  - components/
    - Books.js
  - pages/
    - index.js
  - apolloClient.js
  - server.js
  - package.json

ما یک برنامه ذخیره‌سازی کتاب ساده برای افزودن، به‌روزرسانی، واکشی و حذف یک کتاب ایجاد خواهیم کرد.

مرحله 1: راه اندازی پروژه Next.js

• یک دایرکتوری جدید برای پروژه Next.js خود ایجاد کنید و در آن حرکت کنید.
• با اجرای دستور زیر یک پروژه Next.js جدید را راه اندازی کنید:

npx create-next-app graphql-next-app

به آن دایرکتوری بروید

cd graphql-next-app

• وابستگی های مورد نیاز را نصب کنید

npm install express mongoose next apollo-server-express graphql apollo-client apollo-link-http graphql

مرحله 2: راه اندازی سرور

• یک فایل جدید به نام server.js ایجاد کنید و کد زیر را اضافه کنید:

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const mongoose = require('mongoose');

// Connect to MongoDB
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

const app = express();

const typeDefs = gql`
  type Book {
    id: ID!
    title: String!
    author: String!
  }

  type Query {
    books: [Book]
    book(id: ID!): Book
  }

  type Mutation {
    createBook(title: String!, author: String!): Book
    updateBook(id: ID!, title: String, author: String): Book
    deleteBook(id: ID!): Boolean
  }
`;

const books = [
  { id: '1', title: 'Book 1', author: 'Author 1' },
  { id: '2', title: 'Book 2', author: 'Author 2' },
];

const resolvers = {
  Query: {
    books: () => books,
    book: (parent, { id }) => books.find((book) => book.id === id),
  },
  Mutation: {
    createBook: (parent, { title, author }) => {
      const newBook = { id: String(books.length + 1), title, author };
      books.push(newBook);
      return newBook;
    },
    updateBook: (parent, { id, title, author }) => {
      const book = books.find((book) => book.id === id);
      if (!book) {
        throw new Error('Book not found');
      }
      book.title = title || book.title;
      book.author = author || book.author;
      return book;
    },
    deleteBook: (parent, { id }) => {
      const bookIndex = books.findIndex((book) => book.id === id);
      if (bookIndex === -1) {
        throw new Error('Book not found');
      }
      books.splice(bookIndex, 1);
      return true;
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`)
);

• کد، کتابخانه های express، ApolloServer، gql (برچسب GraphQL) و mongoose را با استفاده از تابع require وارد می کند. این کتابخانه ها برای راه اندازی سرور، تعریف طرحواره های GraphQL و اتصال به MongoDB مورد نیاز هستند.
• سپس با استفاده از mongoose به پایگاه داده mongo db متصل می شویم
• ما یک نمونه از برنامه Express را با استفاده از app = express () ایجاد کرده ایم.
• تابع typeDefs gql برای تعریف تعاریف نوع GraphQL استفاده می شود. یک نوع کتاب را با فیلدهای شناسه، عنوان و نویسنده تعریف می کند. همچنین انواع Query و Mutation را با عملیات مربوطه (کتاب، کتاب، createBook، updateBook، deleteBook) و پارامترهای ورودی آنها تعریف می کند.
• یک آرایه کتاب برای ذخیره برخی از داده های اولیه کتاب تعریف شده است. این داده ها در حل کننده ها استفاده خواهند شد.
• شی Resolers توابع حل کننده را برای پرس و جوها و جهش های تعریف شده تعریف می کند. حل‌کننده‌ها منطق واکشی داده‌ها برای پرس و جوها و انجام اقدامات برای جهش‌ها را مدیریت می‌کنند. در این مورد، حل کننده ها توابعی را برای واکشی و دستکاری آرایه کتاب ها ارائه می کنند.
• کلاس ApolloServer با تعاریف نوع (typeDefs) و حل‌کننده‌ها (Resolver) ارائه شده به عنوان گزینه‌های پیکربندی نمونه‌سازی می‌شود. یک سرور آپولو برای خدمت به API ایجاد می کند.
• سپس سرور را در port:4000 راه اندازی کردیم.

مرحله 3: سرور را راه اندازی کنید

دستور زیر را برای راه اندازی سرور اجرا کنید

node server.js

مرحله 4: ایجاد مشتری GraphQL

• یک فایل جدید به نام apolloClient.js در ریشه پروژه Next.js خود ایجاد کنید.
• کد زیر را برای ایجاد Apollo Client اضافه کنید:

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql', // Update with your server URL
  }),
  cache: new InMemoryCache(),
});

export default client;

مرحله 5: ایجاد یک جزء برای انجام عملیات CRUD

• یک فایل جدید به نام Books.js در پوشه کامپوننت ایجاد کنید (اگر وجود ندارد پوشه را ایجاد کنید).
• کد زیر را به مؤلفه Books.js اضافه کنید:

import { useQuery, useMutation, gql } from '@apollo/client';

const GET_BOOKS = gql`
  query {
    books {
      id
      title
      author
    }
  }
`;

const CREATE_BOOK = gql`
  mutation CreateBook($title: String!, $author: String!) {
    createBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

const UPDATE_BOOK = gql`
  mutation UpdateBook($id: ID!, $title: String, $author: String) {
    updateBook(id: $id, title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

const DELETE_BOOK = gql`
  mutation DeleteBook($id: ID!) {
    deleteBook(id: $id)
  }
`;

const Books = () => {
  const { loading, error, data } = useQuery(GET_BOOKS);
  const [createBook] = useMutation(CREATE_BOOK);
  const [updateBook] = useMutation(UPDATE_BOOK);
  const [deleteBook] = useMutation(DELETE_BOOK);

  const handleCreateBook = async () => {
    try {
      const { data } = await createBook({ variables: { title: 'New Book', author: 'New Author' } });
      console.log('New book created:', data.createBook);
    } catch (error) {
      console.error('Error creating book:', error);
    }
  };

  const handleUpdateBook = async (id, title, author) => {
    try {
      const { data } = await updateBook({ variables: { id, title, author } });
      console.log('Book updated:', data.updateBook);
    } catch (error) {
      console.error('Error updating book:', error);
    }
  };

  const handleDeleteBook = async (id) => {
    try {
      const { data } = await deleteBook({ variables: { id } });
      console.log('Book deleted:', data.deleteBook);
    } catch (error) {
      console.error('Error deleting book:', error);
    }
  };

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <button onClick={handleCreateBook}>Create Book</button>
      <ul>
        {data.books.map((book) => (
          <li key={book.id}>
            {book.title} by {book.author}{' '}
            <button onClick={() => handleUpdateBook(book.id, 'Updated Title', 'Updated Author')}>
              Update
            </button>{' '}
            <button onClick={() => handleDeleteBook(book.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Books;

• این مؤلفه از useQuery Apollo Client، استفاده از قلاب‌های Mutation برای واکشی داده‌های کتاب، ایجاد یک کتاب جدید، به‌روزرسانی کتاب موجود، و حذف یک کتاب استفاده می‌کند.
• بنابراین با استفاده از gql، تعدادی پرس و جو ایجاد کرده و آن کوئری ها را در متغیرها ذخیره کرده ایم.
• ما همچنین متد را از متغیرهای پرس و جوی خود تخریب کردیم تا از آن با متدهای کنترل کننده استفاده کنیم
• سپس روش‌های ناهمگام را برای مدیریت عملیات CRUD برای برنامه BOOK خود ایجاد کرده‌ایم و آن‌ها را درون بلوک try/catch قرار داده‌ایم.
• در داخل متغیر Object، داده‌هایی را که می‌خواهیم ذخیره، به‌روزرسانی، حذف یا واکشی کنیم، ارسال می‌کنیم.
• سپس در حال بررسی وضعیت های بارگذاری و خطا هستیم.
• سپس یک دکمه ایجاد کردیم و روش handleCreateBook را برای ذخیره یک کتاب وصل کردیم.
• در نهایت، داده‌های Book را که از تخریب ساختار با استفاده از قلاب useQuery به دست آورده‌ایم نگاشت کرده‌ایم. هر کتاب دارای یک دکمه ویرایش و حذف است که روش های مربوطه خود را فراخوانی می کند.

مرحله 6: به روز رسانی صفحات Next.js

فایل pages/index.js را باز کنید و محتوای آن را با کد زیر جایگزین کنید:

import Books from '../components/Books';

const Home = () => {
  return (
    <div>
      <h1>Books</h1>
      <Books />
    </div>
  );
};

export default Home;

npm run dev

• اکنون می توانید از http://localhost:3000 در مرورگر خود بازدید کنید تا برنامه Next.js را با قابلیت انجام عملیات CRUD در GraphQL API مشاهده کنید.

توجه: مطمئن شوید که سرور GraphQL شما روی http://localhost:4000 (همانطور که در فایل apolloClient.js مشخص شده است) اجرا می شود تا برنامه Next.js با موفقیت به آن متصل شود.

تبریک می‌گوییم که یک برنامه Full Stack اولیه با GraphQL، Express JS، MongoDB و Next JS ایجاد کرده‌اید.

از اینکه این پست را بررسی کردید متشکرم
می توانید با من تماس بگیرید –
اینستاگرام – https://www.instagram.com/supremacism__shubh/
لینکدین – https://www.linkedin.com/in/shubham-tiwari-b7544b193/
ایمیل – shubhmtiwri00@gmail.com

^^میتونید در لینک زیر کمکم کنید ممنون👇👇 ^^
☕ –> https://www.buymeacoffee.com/waaduheck <--

این پست ها را نیز بررسی کنید
https://dev.to/shubhamtiwari909/website-components-you-should-know-25nm

https://dev.to/shubhamtiwari909/smooth-scrolling-with-js-n56

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/custom-tabs-with-sass-and-javascript-4dej