نحوه ساخت سرور GraphQL با استفاده از Next.js API Routes – Smashing Magazine

درباره نویسنده

Ibrahima Ndaw یک توسعه دهنده و وبلاگ نویس Full-stack است که عاشق جاوا اسکریپت است و همچنین در طراحی UI / UX دست و پنجه نرم می کند.
بیشتر در مورد
ابراهیما
…

Next.js با تمام ویژگی هایی که برای تولید نیاز دارید بهترین تجربه توسعه دهنده را به شما می دهد. این یک راه حل ساده برای ساخت API شما با استفاده از مسیرهای API Next.js فراهم می کند.

در این راهنما ، ابتدا خواهیم آموخت که API Routes چیست و سپس یک سرور GraphQL ایجاد می کنیم که داده ها را از API Github با استفاده از Next.js API Routes بازیابی می کند.

برای استفاده بیشتر از این آموزش ، حداقل باید یک درک اساسی از GraphQL داشته باشید. دانش Apollo Server کمک خواهد کرد اما اجباری نیست. این آموزش به نفع کسانی است که می خواهند مهارت های React یا Next.js خود را به سمت سرور گسترش دهند و بتوانند اولین برنامه کامل پشته خود را با Next.js و GraphQL بسازند.

بنابراین ، بیایید غواصی کنیم

Next.js API Routes چیست؟

Next.js چارچوبی است که امکان اجرای برنامه های React را روی کلاینت یا / و سرور را فراهم می کند. از نسخه 9 ، اکنون می توان از Next.js برای ساخت API با Node.js ، Express ، GrapQL و غیره استفاده کرد. Next.js از فایل سیستم برای درمان پرونده های داخل پوشه استفاده می کند pages/api به عنوان نقاط پایانی API. به این معنی که اکنون می توانید به نقطه پایانی API خود در URL دسترسی پیدا کنید http://localhost:3000/api/your-file-name.

اگر از React آمده اید و هرگز از Next.js استفاده نکرده اید ، ممکن است گیج کننده باشد زیرا Next.js یک چارچوب React است. و همانطور که قبلاً می دانیم ، از React برای ساخت برنامه های جلویی استفاده می شود. پس چرا از Next.js برای برنامه ها و API های backend استفاده می کنیم؟

خوب ، از Next.js می توان در دو طرف سرویس گیرنده و سرور استفاده کرد زیرا با React ، Node.js ، Babel و Webpack ساخته شده است و بدیهی است که باید در سرور نیز قابل استفاده باشد. Next.js برای فعال کردن API Routes به سرور متکی است و به شما امکان می دهد از زبان backend مورد علاقه خود استفاده کنید حتی اگر از نظر فنی یک چارچوب React باشد. امیدوارم که شما آن را درست دریافت کنید.

تاکنون ، ما آموخته ایم که API Routes چیست. با این حال ، سوال اصلی باقی مانده است: چرا از Next.js برای ساختن یک GraphQL Server استفاده کنید؟ چرا از GraphQL یا Node.js برای این کار استفاده نمی کنید؟ بنابراین ، بیایید Next.js API Routes را با راه حل های موجود برای ساخت API ها در بخش بعدی مقایسه کنیم.

Next.js API Routes Versus REST و GraphQL

GraphQL و REST روشهای عالی برای ساختن API ها هستند. امروزه تقریباً توسط همه توسعه دهندگان بسیار محبوب بوده و مورد استفاده قرار می گیرند. بنابراین ، چرا از یک چارچوب React برای ساخت API استفاده می کنیم؟ خوب ، پاسخ سریع این است که اهداف API Next.js هدف دیگری دارند ، زیرا API Routes به شما امکان می دهد برنامه Next.js خود را با افزودن پسوند به آن گسترش دهید.

راه حل های بهتری برای ساخت API ها مانند Node.js ، Express ، GraphQL و غیره وجود دارد ، زیرا آنها بر روی backend تمرکز دارند. به نظر من ، API Routes باید با سمت مشتری همراه باشد تا یک برنامه پشته ای کامل با Next.js ایجاد کند. استفاده از API Routes برای ساختن یک API ساده مانند کم استفاده کردن از قدرت Next.js است زیرا این یک چارچوب React است که به شما امکان می دهد در کمترین زمان یک پسوند به آن اضافه کنید.

مواردی را که باید احراز هویت را به برنامه بعدی موجود اضافه کنید ، مورد استفاده قرار دهید. به جای ساختن قسمت خود از ابتدا با Node.js یا GraphQL ، می توانید از API Routes برای افزودن احراز هویت به برنامه خود استفاده کنید ، و همچنان در قسمت پایانی موجود است http://localhost:3000/api/your-file-name. مسیرهای API اندازه بسته نرم افزاری سمت مشتری شما را افزایش نمی دهد زیرا فقط بسته های سمت سرور است.

با این حال ، مسیرهای API Next.js فقط از همان مبدا قابل دسترسی هستند زیرا API Routes مشخص نیست اشتراک منابع متقابل (CORS) سرصفحه ها با افزودن CORS به API خود می توانید رفتار پیش فرض را تغییر دهید – اما این یک تنظیم اضافی است. اگر برنامه Next خود را با استفاده از ایستا تولید می کنید next export – شما نمی توانید از API Routes در برنامه خود استفاده کنید.

تاکنون ، ما یاد گرفته ایم که چه زمانی API Routes می تواند راه حل بهتری نسبت به موارد دیگر باشد. حال ، بیایید دست خود را کثیف کنیم و شروع به ساخت GraphQL Server خود کنیم.

راه اندازی

برای شروع یک برنامه جدید با Next.js ، ما به سراغ ایجاد برنامه بعدی می رویم. همچنین امکان تنظیم دستی یک برنامه جدید با Webpack وجود دارد. از انجام این کار بیش از حد استقبال می کنید. همانطور که گفته شد ، رابط خط فرمان خود را باز کنید و این دستور را اجرا کنید:

npx create-next-app next-graphql-server

Next.js یک الگوی شروع کننده برای API Routes فراهم می کند. با اجرای دستور زیر می توانید از آن استفاده کنید:

npx create-next-app --example api-routes api-routes-app

در این آموزش ، ما می خواهیم همه کارها را از ابتدا انجام دهیم ، به همین دلیل برای ایجاد یک برنامه جدید و نه الگوی شروع کننده ، از ایجاد برنامه بعدی استفاده می کنیم. اکنون ، ساختار پروژه را به صورت زیر تنظیم کنید:

├── pages
|  ├── api
|  |  ├── graphql.js
|  |  ├── resolvers
|  |  |  └── index.js
|  |  └── schemas
|  |     └── index.js
|  └── index.js
├── package.json
└── yarn.lock

همانطور که قبلا گفتیم ، api پوشه محلی است که API یا سرور ما در آن زندگی می کند. از آنجا که ما از GraphQL استفاده خواهیم کرد ، برای ایجاد یک سرور GraphQL به یک راه حل و یک طرحواره نیاز داریم. نقطه پایانی سرور در مسیر قابل دسترسی خواهد بود /api/graphql، که نقطه ورود سرور GraphQL است.

با این گام به جلو ، اکنون می توانیم GraphQL Schema را برای سرور خود ایجاد کنیم.

طرح های GraphQL را ایجاد کنید

به عنوان یک جمع بندی سریع ، یک نمودار GraphQL شکل نمودار داده شما را تعریف می کند.

بعد ، ما باید نصب کنیم apollo-server-micro برای استفاده از Apollo Server در Next.js.

yarn add apollo-server-micro

برای npm

npm install apollo-server-micro

حال ، بیایید یک طرح جدید GraphQL ایجاد کنیم.

که در api/schemas/index.js

import  {  gql  }  from  "apollo-server-micro"; 

export  const  typeDefs  =  gql`
    type  User {
        id: ID
        login: String
        avatar_url: String
    }

    type  Query {
        getUsers: [User]
        getUser(name: String!): User!
    }`

در اینجا ، ما تعریف a User نوعی که شکل کاربر Github را توصیف می کند. انتظار دارد id از نوع ID، آ login، و یک avatar_url از نوع String. سپس ، از نوع موجود در آن استفاده می کنیم getUsers پرسشی که باید آرایه ای از کاربران را برگرداند. بعد ، ما به getUser پرس و جو برای واکشی یک کاربر منفرد. برای بازیابی آن باید نام کاربر را دریافت کند.

با این GraphQL Schema ایجاد شده ، اکنون می توانیم فایل حل کننده را به روز کرده و توابع را برای انجام این نمایش داده ها در بالا ایجاد کنیم.

GraphQL Resolvers ایجاد کنید

یک حلال GraphQL مجموعه ای از توابع است که به شما امکان می دهد از یک پرس و جو GraphQL پاسخی ایجاد کنید.

برای درخواست داده از Github API ، ما باید آن را نصب کنیم axios کتابخانه بنابراین ، CLI خود را باز کرده و این دستور را اجرا کنید:

yarn add axios

یا هنگام استفاده npm

npm install axios

پس از نصب کتابخانه ، بیایید اکنون چند کد معنی دار را به پرونده حلال ها اضافه کنیم.

که در api/resolvers/index.js

import axios from "axios";

export const resolvers = {
  Query: {
    getUsers: async () => {
      try {
        const users = await axios.get("https://api.github.com/users");
        return users.data.map(({ id, login, avatar_url }) => ({
          id,
          login,
          avatar_url
        }));
      } catch (error) {
        throw error;
      }
    },
    getUser: async (_, args) => {
      try {
        const user = await axios.get(
          `https://api.github.com/users/${args.name}`
        );
        return {
          id: user.data.id,
          login: user.data.login,
          avatar_url: user.data.avatar_url
        };
      } catch (error) {
        throw error;
      }
    }
  }
};

همانطور که در اینجا مشاهده می کنید ، ما نام کوئری هایی را که قبلاً در GraphQL Schema تعریف شده اند با توابع حلگر مطابقت می دهیم. getUsers تابع ما را قادر می سازد تا همه کاربران را از API بازیابی کرده و سپس مجموعه ای از کاربران را که نیاز به آینه سازی دارند ، بازگردانیم User نوع بعد ، ما از getUser روش برای واکشی یک کاربر تنها با کمک نامی که به عنوان یک پارامتر در آن وارد شده است.

با در دست داشتن این مورد ، اکنون یک GraphQL Schema و یک GraphQL Resolution داریم – وقت آن است که آنها را ترکیب کنیم و سرور GraphQL را بسازیم.

سرور GraphQL را ایجاد کنید

یک سرور GraphQL اطلاعات شما را به عنوان یک GraphQL API نشان می دهد. این برنامه به مشتریان این قدرت را می دهد تا دقیقاً داده های مورد نیاز خود را بخواهند و نه چیز دیگری.

که در api/graphql.js

import  {  ApolloServer  }  from  "apollo-server-micro";
import  {  typeDefs  }  from  "./schemas";
import  {  resolvers  }  from  "./resolvers";

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

export  const  config  =  {
    api:  {
        bodyParser:  false
    }
};

export  default  apolloServer.createHandler({ path:  "/api/graphql"  });

بعد از وارد کردن ApolloServer، ما از آن برای ایجاد یک نمونه جدید استفاده می کنیم و سپس در طرح و حل و فصل برای ایجاد یک سرور GraphQL عبور می کنیم. در مرحله بعدی ، باید به Next.js بگوییم که درخواست ورودی را تجزیه و تحلیل نکند و به GraphQL اجازه دهد تا آن را برای ما کنترل کند. در آخر ، ما استفاده می کنیم apolloServer برای ایجاد یک کنترل کننده جدید ، که به معنی مسیر است /api/graphql به عنوان یک نقطه ورود به سرور GraphQL ما عمل خواهد کرد.

برخلاف سرور آپولو معمولی ، Next.js شروع سرور را برای ما مدیریت می کند زیرا این کار به رندر سمت سرور متکی است. به همین دلیل ، در اینجا ، مجبور نیستیم سرور GraphQL را به تنهایی راه اندازی کنیم.

عالی! با این گام به جلو ، اکنون می توانیم بررسی کنیم که آیا سرور GraphQL کار می کند.

سرور GraphQL را تست کنید

پس از مرور ریشه پروژه ، آن را روی CLI باز کرده و این دستور را اجرا کنید:

yarn dev

یا برای npm

npm run dev

اکنون ، بازدید کنید http://localhost:3000/api/graphql و برای بازیابی همه کاربران از Github ، پرس و جو GraphQL زیر را اضافه کنید.

{
  getUsers {
    id
    login
    avatar_url
  }
}

بیایید بررسی کنیم که آیا می توانیم یک کاربر منفرد را با این سeryال واکشی کنیم.

query($name: String!){
  getUser(name:$name){
        login
    id
    avatar_url
  }
}

عالی! سرور ما مطابق انتظار کار می کند. کار ساخت یک سرور GraphQL با استفاده از Next.js API Routes تمام شده است.

نتیجه

در این آموزش ، ابتدا با توضیح دادن اینکه چیستند ، مسیرهای API Next.js را طی کردیم و سپس با Next.js یک سرور GraphQL ساختیم. توانایی افزودن backend به برنامه های Next.js یک ویژگی بسیار خوب است. به ما امکان می دهد برنامه های خود را با یک باطن واقعی گسترش دهیم. حتی می توانید فراتر رفته و یک پایگاه داده را برای ساختن یک API کامل با استفاده از API Routes متصل کنید. Next.js قطعاً ساخت یک برنامه کاملاً پشته با API Routes را آسان می کند.

می توانید پیش نمایش پروژه در CodeSandbox به پایان رسید.

با تشکر برای خواندن

منابع بیشتر

این منابع مفید شما را از حوصله این آموزش خارج خواهد کرد.

(ks ra، yk، il)