third-api

​

Third party APIs

We may want to add some custom actions and call differents APIs to extend our Cella App.

What are third party APIs?

Third party APIs are APIs provided by third parties — generally companies such as Facebook, Twitter, or Google — to allow you to access their functionality via JavaScript and use it on your site. One of the most obvious examples is using mapping APIs to display custom maps on your pages. ​ Next.js ships with API routes, which provide an easy solution to build your own API. In cella application, we also provide api that allow integrators handle custom actions that needed to do some business logic as well as 3rd party API calls. ​ ​ Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size. ​

Creating new API endpoint

​ In pages/api folder create your API endpoint. For example the following API route pages/api/article.ts returns a json response with a status code of 200: ​

pages/api/article.ts

export default function handler(req, res) {
    res.status(200).json({ name: "John Doe" });
}

​ To handle different HTTP methods in an API route, you can use req.method in your request handler, like so: ​

export default function handler(req, res) {
    if (req.method === "POST") {
        // Process a POST request
    } else {
        // Handle any other HTTP method
    }
}

​

Dynamic API Routes

​ API routes support dynamic routes, and follow the same file naming rules used for pages. ​ ​ For example, the API route pages/api/article/update-quantity/[id].ts has the following code: ​

import type { NextApiRequest, NextApiResponse } from 'next';
import { GraphQLClient, gql } from 'graphql-request';
​
export default async (req: NextApiRequest, res: NextApiResponse) => {
    const { id } = req.query;
    const token = req.headers.cookie?.split('token=')[1].split(';')[0];
    const requestHeader = {
        authorization: `Bearer ${token}`
    };
    const graphqlRequestClient = new GraphQLClient(
        process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT as string,
        {
            headers: requestHeader
        }
    );
    // handle logic of calculating box quantity
    ...
    res.status(200).json({ quantity: result.updateArticle.boxQuantity });
}

​ You can get id as requests query and can handle logic to calculate the box quantity and return it as json response.