Как получить данные из Context API в функции getstaticprops Next.JS

Question

Я использую функцию оплаты для своего статического приложения Next.JS для электронной коммерции.

Для оплаты у меня несколько этапов:

1. Создание страницы корзины с формой информации о доставке и кнопкой «Оплатить», которая перенаправляет на / страницу оплаты;
2. На странице / payment я подключаюсь к своей платежной службе и мне нужно получить информацию о корзине из Context API, но я не могу использовать Context API в getStaticProps, это моя проблема. Платежной странице нужно просто получить данные корзины и перенаправить на внешнюю форму оплаты службы.

Код для страницы / оплаты ниже:

      import { useEffect, useContext } from "react"
import QiwiBillPaymentsAPI from "@qiwi/bill-payments-node-js-sdk"

import { CartContext } from "@/context/GlobalState"

export default function Payment ({ payUrl }) {
    useEffect(() => window.location.assign(payUrl))
    return (
        <span>Redirect</span>
    )
}


export async function getStaticProps() {
    const qiwiApi = new QiwiBillPaymentsAPI(process.env.QIWI_SECRET_KEY)

    const { state, dispatch } = useContext(CartContext)
    const { cart } = state

    const billId = qiwiApi.generateId()
    const lifetime = qiwiApi.getLifetimeByDay(1);
    const fields = {
        amount: 1.00,
        currency: "RUB",
        expirationDateTime: lifetime,
    }

    const payment_data = await qiwiApi.createBill( billId, fields )
    const payUrl = payment_data.payUrl

    return { props: { payUrl }}
}

Пожалуйста, помогите мне с любыми идеями. Заранее спасибо!

Answer 1

Возможное решение!

Я сделал API-маршрут с кодом из моей функции getStaticProps (он получает общую стоимость и делает запрос в платежную службу, а затем возвращает URL-адрес платежа). Код маршрута API приведен ниже:

      import QiwiBillPaymentsAPI from "@qiwi/bill-payments-node-js-sdk"

export default async function handler(req, res) {
    const { 
        query: { total },
    } = req

    const qiwiApi = new QiwiBillPaymentsAPI(process.env.QIWI_SECRET_KEY)
    const billId = qiwiApi.generateId()
    const lifetime = qiwiApi.getLifetimeByDay(1);
    const fields = {
        amount: total,
        currency: "RUB",
        expirationDateTime: lifetime,
    }

    const payment_data = await qiwiApi.createBill( billId, fields )
    const payUrl = payment_data.payUrl

    res.json({ url: payUrl })
}

Затем / код страницы оплаты (выполните запрос к моему маршруту API и получите URL-адрес платежа, затем перенаправьте на форму оплаты):

      export default function Payment () {
    const { state, dispatch } = useContext(CartContext)
    const { cart } = state

    const fetcher = (...args) => fetch(...args).then(res => res.json())

    const { data, error } = useSWR(`/api/qiwi-pay?total=${cart.total}`, fetcher)

    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>

    window.location.assign(data.url)

    return (
        <>
            <span>Redirect to payment form.</span>
        </>
    )
}

Такой подход работает очень хорошо!