Node.js Backend Development Bootcamp · درس

إنشاء خادم GraphQL باستخدام Apollo

طبّقوا GraphQL API في Node.js باستخدام Apollo Server، واربطوه بمصادر بياناتكم وعرّفوا المحلِّلات

إنشاء خادم GraphQL باستخدام Apollo درس مجاني في Node.js Backend Development Bootcamp على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Node.js Backend Development Bootcamp، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Node.js Backend Development Bootcamp 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Meet Apollo Server

Welcome to building a GraphQL server! We'll use Apollo Server, a popular open-source library that helps you implement a production-ready GraphQL API in Node.js.

It's easy to set up.
It integrates with many Node.js frameworks like Express.
It provides powerful tools like GraphQL Playground for testing.

Apollo Server handles the heavy lifting, letting you focus on your data.

إنشاء خادم GraphQL باستخدام Apollo — رسم توضيحي 1

Project Setup for Apollo

Let's get started by setting up our project. Open your terminal and run these commands to create a new Node.js project and install the required libraries:

apollo-server: The core library for building our GraphQL server.
graphql: The JavaScript implementation of the GraphQL specification.

Here's how to do it:

mkdir my-graphql-api cd my-graphql-api npm init -y npm install apollo-server graphql

Once installed, you're ready to write some code!

Schema & Resolvers: The Core

A GraphQL server has two main parts:

Schema (Type Definitions): This defines the shape of your data and the operations clients can perform (queries, mutations). Think of it as the contract between client and server.
Resolvers: These are functions that tell GraphQL how to fetch the data for each type and field defined in your schema. They are the "backend logic" for your API.

Together, they define your API's capabilities and how it interacts with your data.

Crafting Your GraphQL Schema

We define the schema using a special template literal tag called gql (from apollo-server). This allows us to write GraphQL Schema Definition Language (SDL).

The most important type is Query, which defines all the ways clients can read data from your API. Let's define a simple Query that returns a "hello" message.

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

console.log('Your schema is ready!');

Building Your Resolvers

Now that we have our schema, we need to tell GraphQL how to actually get the data for the hello field. This is where resolvers come in.

Resolvers are functions that match the fields in your schema. When a client queries hello, the corresponding resolver function will be executed.

const resolvers = {
  Query: {
    hello: () => 'Hello from your GraphQL API!',
  },
};

console.log('Resolvers are defined!');

Launching Your First Server

Let's put it all together! We'll combine the typeDefs and resolvers with ApolloServer to create a complete, runnable GraphQL server.

Create a file named index.js and add the following code. Then, run it with node index.js.

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

// 1. Define your schema (type definitions)
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// 2. Define your resolvers (how to fetch data)
const resolvers = {
  Query: {
    hello: () => 'Hello from your GraphQL API!',
  },
};

// 3. Create an Apollo Server instance
const server = new ApolloServer({ typeDefs, resolvers });

// 4. Start the server
server.listen({ port: 4000 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
  console.log('Try opening your browser to test it!');
});

Defining Custom Data Types

A simple "hello" isn't very exciting. Let's define a custom type, like Book, with its own fields. This shows how you structure more complex data.

Update your typeDefs to include the Book type and a books query that returns a list of them.

const { gql } = require('apollo-server');

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

  type Query {
    hello: String
    books: [Book]
  }
`;

console.log('Schema updated with Book type!');

Resolving Custom Types

To make the books query work, we need to update our resolvers. For now, we'll use an in-memory array of objects to simulate a database. In real applications, resolvers connect to databases or other APIs.

Let's update the resolvers to provide data for our books query.

const books = [
  {
    title: 'The Great Gatsby',
    author: 'F. Scott Fitzgerald',
  },
  {
    title: 'To Kill a Mockingbird',
    author: 'Harper Lee',
  },
];

const resolvers = {
  Query: {
    hello: () => 'Hello from your GraphQL API!',
    books: () => books,
  },
};

console.log('Resolvers updated for books!');

Full API with Books

Here's the complete index.js file with our new Book type and its resolver. Run this with node index.js.

Once running, open the URL in your browser (e.g., http://localhost:4000). You'll see the GraphQL Playground, where you can test queries like:

query { books { title author } }

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

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

  type Query {
    hello: String
    books: [Book]
  }
`;

const books = [
  {
    title: 'The Great Gatsby',
    author: 'F. Scott Fitzgerald',
  },
  {
    title: 'To Kill a Mockingbird',
    author: 'Harper Lee',
  },
];

const resolvers = {
  Query: {
    hello: () => 'Hello from your GraphQL API!',
    books: () => books,
  },
};

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

server.listen({ port: 4000 }).then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
  console.log('Explore your API in GraphQL Playground!');
});

Schema vs. Resolvers Check

You've learned about the two fundamental parts of a GraphQL server: the schema (type definitions) and the resolvers.

Which of the following best describes the primary role of GraphQL Resolvers in an Apollo Server?

Apollo Server: Quick Recap

Great job! You've successfully built your first GraphQL server with Apollo Server.

We installed apollo-server and graphql.
We defined our API's structure using Type Definitions (typeDefs) written in GraphQL SDL.
We implemented Resolvers to specify how to fetch data for the fields in our schema, using mock data.
We launched our server using ApolloServer and explored it with GraphQL Playground.

This is the foundation for building powerful and flexible GraphQL APIs. Next, you can explore mutations, arguments, and connecting to real databases!

الأسئلة الشائعة

هل درس «إنشاء خادم GraphQL باستخدام Apollo» مجاني؟

نعم — نص درس «إنشاء خادم GraphQL باستخدام Apollo» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Node.js Backend Development Bootcamp، انتقل إلى CoddyKit PRO. تتضمن دورة Node.js Backend Development Bootcamp 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء خادم GraphQL باستخدام Apollo»؟

طبّقوا GraphQL API في Node.js باستخدام Apollo Server، واربطوه بمصادر بياناتكم وعرّفوا المحلِّلات تتمرن على Node.js Backend Development Bootcamp مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Node.js Backend Development Bootcamp؟

لا تُشترط خبرة سابقة. Node.js Backend Development Bootcamp على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «إنشاء خادم GraphQL باستخدام Apollo»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Node.js Backend Development Bootcamp هذا؟

نعم. كل درس في Node.js Backend Development Bootcamp يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Node.js Backend Development Bootcamp