Javascript 如何通过Axios在GraphQL查询中发送数组

您试图在需要GraphQL格式化的地方使用JSON格式化，而将产品数组转换为所需格式的逻辑不正确.GraphQL查询的正确方法是以GraphQL理解的格式将产品数组作为对象列表发送，而不是JSON字符串.

From个个

const productsQuery = `[${JSON.stringfy(convertObj)}]`;

const queryBody = `{sampleService(customerId: "${customerId}", purchaseItems: ${productsQuery}) {sessionId}}`;

To个个

const productsQuery = uniqueProducts.map(product => {
    return `{id:${product.id},name:"${product.name}",price:${product.price}}`;
}).join(",");

const queryBody = `{sampleService(customerId: "${customerId}", purchaseItems: [${productsQuery}]) {sessionId}}`;

和

Reduce函数逻辑对于预期目的是不正确的.它似乎试图从一组产品创建一个对象，但这不是GraphQL查询的正确方法，因为它需要一个项目数组，而不是一个对象.

大概是这样的.

From个个

const convertObj = product.reduce((acc, product) => {
    const { id, name, price } = offer;
    return { ...acc, id: id, name: name, price: price };
}, {});

To个个

const uniqueProducts = products.reduce((acc, product) => {
    if (!acc.find(p => p.id === product.id && p.name === product.name && p.price === product.price)) {
        acc.push(product);
    }
    return acc;
}, []);

演示

服务器端，另存为server.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(bodyParser.json());

const products = [
    { id: 1, name: 'laptop', price: 500 },
    { id: 2, name: 'book', price: 3 },
    { id: 3, name: 'cd', price: 20 },
    { id: 4, name: 'television', price: 3000 }
];

function parseGraphQLItems(itemsString) {
    // Basic parsing logic for GraphQL format (adjust as needed)
    const itemObjects = itemsString.match(/{[^}]*}/g);
    return itemObjects ? itemObjects.map(item => {
        const idMatch = item.match(/id:(\d+)/);
        const nameMatch = item.match(/name:"([^"]+)"/);
        const priceMatch = item.match(/price:(\d+)/);

        return {
            id: idMatch ? parseInt(idMatch[1], 10) : null,
            name: nameMatch ? nameMatch[1] : null,
            price: priceMatch ? parseFloat(priceMatch[1]) : null
        };
    }) : [];
}

app.post('/', (req, res) => {
    try {
        console.log("Received request:", req.body);

        const query = req.body.query || '';
        // Extract customerId from the query
        const customerIdMatch = query.match(/customerId: "([^"]+)"/);
        const customerId = customerIdMatch ? customerIdMatch[1] : null;

        // Extract and parse the purchaseItems
        const purchaseItemsMatch = query.match(/purchaseItems: (\[.*?\])/);
        let purchaseItems = [];
        if (purchaseItemsMatch) {
            const purchaseItemsString = purchaseItemsMatch[1].replace(/(\w+):/g, '"$1":'); // Ensure proper JSON format
            purchaseItems = JSON.parse(purchaseItemsString);
        }
        console.log("Parsed purchaseItems:", purchaseItems);

        // Processing logic...
        const sessionData = purchaseItems.map(item => {
            const product = products.find(p => p.id === item.id);
            return product ? { ...product, customerId } : null;
        }).filter(item => item !== null);

        res.json({ sessionId: 'mock-session-id', purchasedItems: sessionData });
    } catch (error) {
        console.error(error);
        res.status(500).send('Internal Server Error');
    }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

客户端，另存为client.js

const axios = require('axios');
const customerId = 'your_customer_id'; // Replace with your actual customer ID
const sample_token = 'your_token'; // Replace with your actual token

const products = [{ id: 1, name: 'laptop', price: 500 }, { id: 2, name: 'book', price: 3 }];

const uniqueProducts = products.reduce((acc, product) => {
    if (!acc.find(p => p.id === product.id && p.name === product.name && p.price === product.price)) {
        acc.push(product);
    }
    return acc;
}, []);

// Convert each product to a GraphQL input object format
const productsQuery = uniqueProducts.map(product => {
    return `{id:${product.id},name:"${product.name}",price:${product.price}}`;
}).join(",");

const queryBody = `{sampleService(customerId: "${customerId}", purchaseItems: [${productsQuery}]) {sessionId}}`;

const updateBody = {
    query: queryBody,
};

axios({
    method: "POST",
    url: "http://localhost:3000/",
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': sample_token
    },
    data: updateBody,
})
.then((response) => {
    console.log('Response Data:', JSON.stringify(response.data, null, 4));
})
.catch((error) => {
    console.error('Error:', error);
});

Result

Left is the server, Right is the client

Postman Test

在输入体中查询.

{
    "query": "{sampleService(customerId: \"your_customer_id\", purchaseItems: [{id:1,name:\"laptop\",price: 500},{id: 2,name:\"book\",price:3}]) {sessionId}}"
}