Ecommerce With Graphql | Graphql Projects

Developing an E-commerce Application

In this guide, you will learn how to develop a full-fledged e-commerce application using GraphQL. This will include setting up a GraphQL server, defining schemas, and implementing key functionalities.

Key Points:

Understand the structure of a GraphQL API for e-commerce.
Implement product management and order processing.
Utilize GraphQL subscriptions for real-time updates.

Step 1: Setting Up Your GraphQL Server

Begin by setting up a GraphQL server using Apollo Server. Install the necessary packages:

npm install apollo-server graphql

Create your server and define the initial schema:

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

const typeDefs = gql`
  type Product {
    id: ID!
    name: String!
    price: Float!
    description: String
  }

  type Order {
    id: ID!
    productId: ID!
    quantity: Int!
  }

  type Query {
    products: [Product]
    orders: [Order]
  }

  type Mutation {
    addProduct(name: String!, price: Float!, description: String): Product
    placeOrder(productId: ID!, quantity: Int!): Order
  }
`;

const resolvers = {
  Query: {
    products: () => [
      { id: '1', name: 'Laptop', price: 999.99, description: 'High performance laptop' },
      { id: '2', name: 'Smartphone', price: 599.99, description: 'Latest model smartphone' },
    ],
    orders: () => [],
  },
  Mutation: {
    addProduct: (parent, { name, price, description }) => {
      // Logic to add product
    },
    placeOrder: (parent, { productId, quantity }) => {
      // Logic to place an order
    },
  },
};

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

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

Step 2: Implementing Product Management

Expand your resolvers to include logic for adding products and placing orders:

const products = [];

const resolvers = {
  Query: {
    products: () => products,
    orders: () => [],
  },
  Mutation: {
    addProduct: (parent, { name, price, description }) => {
      const product = { id: String(products.length + 1), name, price, description };
      products.push(product);
      return product;
    },
    placeOrder: (parent, { productId, quantity }) => {
      // Logic to place an order
    },
  },
};

Step 3: Implementing Order Processing

Add order processing logic and enhance your GraphQL schema:

const orders = [];

const resolvers = {
  // ... existing resolvers
  Mutation: {
    // ... existing mutations
    placeOrder: (parent, { productId, quantity }) => {
      const order = { id: String(orders.length + 1), productId, quantity };
      orders.push(order);
      return order;
    },
  },
};

Step 4: Using GraphQL Subscriptions

Implement subscriptions to handle real-time updates, such as new product additions:

const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

const typeDefs = gql`
  // ... existing types
  type Subscription {
    productAdded: Product
  }
`;

const resolvers = {
  // ... existing resolvers
  Mutation: {
    addProduct: (parent, { name, price, description }) => {
      const product = { id: String(products.length + 1), name, price, description };
      products.push(product);
      pubsub.publish('PRODUCT_ADDED', { productAdded: product });
      return product;
    },
  },
  Subscription: {
    productAdded: {
      subscribe: () => pubsub.asyncIterator(['PRODUCT_ADDED']),
    },
  },
};

Step 5: Setting Up the Client

Now, set up your client application using Apollo Client to fetch and manage data:

npm install @apollo/client graphql

Create an Apollo Client setup:

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

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

Step 6: Building the E-commerce Interface

Create components to display products, add new products, and place orders:

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

const GET_PRODUCTS = gql`
  query GetProducts {
    products {
      id
      name
      price
      description
    }
  }
`;

const ADD_PRODUCT = gql`
  mutation AddProduct($name: String!, $price: Float!, $description: String) {
    addProduct(name: $name, price: $price, description: $description) {
      id
      name
      price
      description
    }
  }
`;

const ECommerce = () => {
  const { loading, error, data } = useQuery(GET_PRODUCTS);
  const [addProduct] = useMutation(ADD_PRODUCT);

  const handleAddProduct = () => {
    // Call addProduct mutation
  };

  if (loading) return Loading...;
  if (error) return Error: {error.message};

  return (
    
      Products
      
        {data.products.map(product => (
          {product.name} - ${product.price}
        ))}
      
      {/* Form to add new product */}
    
  );
};

export default ECommerce;

Conclusion

You have successfully developed an e-commerce application using GraphQL! This application can be further enhanced with features like user authentication, payment processing, and improved UI/UX design.

GraphQL - E-commerce with GraphQL