Клиентская часть не может найти товары, бренды и категории после интеграции с серверной частью, почему?

Question

[FeDroid74]

Как только закончил с версткой, я приступил к интеграции клиентской части с серверной и я начал с витрины магазина, но не одна из частей витрины не смогла найти ничего из своих строк, причем в базе данных они есть. По видимому, проблема в запросах, но всё проходит успешно, а товары, бренды и категории не найдены и выдают ошибку 404.




Код CatalogAPI.js от клиентской части:

import {guestInstance, authInstance} from './index.js'

export const createCategory = async (category) => {
    const {data} = await authInstance.post('category/create', category)
    return data
}

export const updateCategory = async (id, category) => {
    const {data} = await authInstance.put(`category/update/${id}`, category)
    return data
}

export const deleteCategory = async (id) => {
    const {data} = await authInstance.delete(`category/delete/${id}`)
    return data
}

export const fetchCategories = async () => {
    const {data} = await guestInstance.get('category/getAll')
    return data
}

export const createBrand = async (brand) => {
    const {data} = await authInstance.post('brand/create', brand)
    return data
}

export const updateBrand = async (id, brand) => {
    const {data} = await authInstance.put(`brand/update/${id}`, brand)
    return data
}

export const deleteBrand = async (id) => {
    const {data} = await authInstance.delete(`brand/delete/${id}`)
    return data
}

export const fetchBrands = async () => {
    const {data} = await guestInstance.get('brand/getAll')
    return data
}

export const createProduct = async (product) => {
    const {data} = await authInstance.post('product/create', product)
    return data
}

export const updateProduct = async (id, product) => {
    const {data} = await authInstance.put(`product/update/${id}`, product)
    return data
}

export const deleteProduct = async (id) => {
    const {data} = await authInstance.delete(`product/delete/${id}`)
    return data
}

export const fetchAllProducts = async (categoryId, brandId, page, limit) => {
    let url = 'product/getAll'
    if (categoryId) url = url + '/categoryId/' + categoryId
    if (brandId) url = url + '/brandId/' + brandId
    const { data } = await guestInstance.get(
        url,
        {params: {page, limit}
        })
    return data
}

export const fetchOneProduct = async (id) => {
    const {data} = await guestInstance.get(`product/getOne/${id}`)
    return data
}

Также при запросе сервер выдаёт вот такую ошибку:

node:internal/process/promises:227
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error
    at Query.run (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\sequelize\lib\dialects\postgres\query.js:50:25)
    at C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\sequelize\lib\sequelize.js:313:28
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async PostgresQueryInterface.select (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\sequelize\lib\dialects\abstract\query-interface.js:396:12)
    at async Function.findAll (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\sequelize\lib\model.js:1126:21)
    at async Function.findOne (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\sequelize\lib\model.js:1220:12)
    at async getOne (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\controllers\productController.js:55:25) {
  name: 'SequelizeDatabaseError',
  parent: error: неверный синтаксис для типа integer: "getAll"
      at Parser.parseErrorMessage (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\pg-protocol\dist\parser.js:287:98)
      at Parser.handlePacket (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\pg-protocol\dist\parser.js:126:29)
      at Parser.parse (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\pg-protocol\dist\parser.js:39:38)
      at Socket.<anonymous> (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\pg-protocol\dist\index.js:11:42)
      at Socket.emit (node:events:379:20)
      at addChunk (node:internal/streams/readable:313:12)
      at readableAddChunk (node:internal/streams/readable:288:9)
      at Socket.Readable.push (node:internal/streams/readable:227:10)
      at TCP.onStreamRead (node:internal/stream_base_commons:190:23) {
    length: 141,
    severity: 'ОШИБКА',
    code: '22P02',
    detail: undefined,
    hint: undefined,
    position: '523',
    internalPosition: undefined,
    internalQuery: undefined,
    where: undefined,
    schema: undefined,
    table: undefined,
    column: undefined,
    dataType: undefined,
    constraint: undefined,
    file: 'numutils.c',
    line: '323',
    routine: 'pg_strtoint32',
    sql: `SELECT "product"."id", "product"."name", "product"."price", "product"."img", "product"."createdAt", "product"."updatedAt", "product"."categoryId", "product"."brandId", "
info"."id" AS "info.id", "info"."title" AS "info.title", "info"."description" AS "info.description", "info"."createdAt" AS "info.createdAt", "info"."updatedAt" AS "info.updatedAt"
, "info"."productId" AS "info.productId" FROM "products" AS "product" LEFT OUTER JOIN "product_infos" AS "info" ON "product"."id" = "info"."productId" WHERE "product"."id" = 'getA
ll';`,
    parameters: undefined
  },
  original: error: неверный синтаксис для типа integer: "getAll"
      at Parser.parseErrorMessage (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\pg-protocol\dist\parser.js:287:98)
      at Parser.handlePacket (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\pg-protocol\dist\parser.js:126:29)
      at Parser.parse (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\pg-protocol\dist\parser.js:39:38)
      at Socket.<anonymous> (C:\Users\FeDroid74\OneDrive\Рабочий стол\Web\Проект\Сайт\server\node_modules\pg-protocol\dist\index.js:11:42)
      at Socket.emit (node:events:379:20)
      at addChunk (node:internal/streams/readable:313:12)
      at readableAddChunk (node:internal/streams/readable:288:9)
      at Socket.Readable.push (node:internal/streams/readable:227:10)
      at TCP.onStreamRead (node:internal/stream_base_commons:190:23) {
    length: 141,
    severity: 'ОШИБКА',
    code: '22P02',
    detail: undefined,
    hint: undefined,
    position: '523',
    internalPosition: undefined,
    internalQuery: undefined,
    where: undefined,
    schema: undefined,
    table: undefined,
    column: undefined,
    dataType: undefined,
    constraint: undefined,
    file: 'numutils.c',
    line: '323',
    routine: 'pg_strtoint32',
    sql: `SELECT "product"."id", "product"."name", "product"."price", "product"."img", "product"."createdAt", "product"."updatedAt", "product"."categoryId", "product"."brandId", "
info"."id" AS "info.id", "info"."title" AS "info.title", "info"."description" AS "info.description", "info"."createdAt" AS "info.createdAt", "info"."updatedAt" AS "info.updatedAt"
, "info"."productId" AS "info.productId" FROM "products" AS "product" LEFT OUTER JOIN "product_infos" AS "info" ON "product"."id" = "info"."productId" WHERE "product"."id" = 'getA
ll';`,
    parameters: undefined
  },
  sql: `SELECT "product"."id", "product"."name", "product"."price", "product"."img", "product"."createdAt", "product"."updatedAt", "product"."categoryId", "product"."brandId", "in
fo"."id" AS "info.id", "info"."title" AS "info.title", "info"."description" AS "info.description", "info"."createdAt" AS "info.createdAt", "info"."updatedAt" AS "info.updatedAt", 
"info"."productId" AS "info.productId" FROM "products" AS "product" LEFT OUTER JOIN "product_infos" AS "info" ON "product"."id" = "info"."productId" WHERE "product"."id" = 'getAll
';`,
  parameters: {}
}
[nodemon] app crashed - waiting for file changes before starting...

Comments

[Модератор]

См.п.3.1, 3.8

Answer 1

[romaro]

AS "info" ON "product"."id" = "info"."productId" WHERE "product"."id" = 'getAll

Постегрес у вас ругается на несовпадение типов. Вы буквально просите выдать строку по ключу 'getAll', а ожидается число (int).

Я не знаю, какая ORM у вас на бекенде, но, вероятно, в параметр метода нужно передавать только название сущности:
const {data} = await guestInstance.get('brand/')

Comments

[FeDroid74]

У меня ORM sequelize, так же я обратил внимание на Ваше замечание и исправил отправку запроса на ту, которую я указываю в postman, т.к. если указывается только сущность то страница сайта ложится и не показывается вовсе. Но, к сожалению, это тоже не помогло, думать он начал упорнее, а после перезапуска серверной части так и вообще не обращает внимание на её существование (не выводит ошибки).

[romaro]

Так судя по постману у вас в list-запросах (которые списки возвращают) приходит массив, а вы пытаетесь извлечь из него свойство data и он логично возвращает вам undefined.

Вы поставьте консоль лог после await и напишите, какая структура данных приходит в переменную. Скорее всего это будет массив объектов.

export const fetchBrands = async () => {
    const {data} = await guestInstance.get('brand/')
    console.log(data);
    return data
}

[FeDroid74]

romaro, Сделал как вы просили, вчера еще я поигрался с ссылками, попробовал несколько вариантов, которые мне пришли в голову, мне помог именно этот вариант:

export const fetchBrands = async () => {
    const {data} = await guestInstance.get('/brand')
    console.log(data);
    return data
}

Также очень хотелось чтобы вы мне помогли с данной ситуацией, решение которое я указал выше просто кладет сайт.

export const fetchAllProducts = async (categoryId, brandId, page, limit= 5) => {
    const {data} = await guestInstance.get('api/product', {params: {
            categoryId, brandId, page, limit
        }})
    console.log(data);
    return data
}

[romaro]

FeDroid74, сорри, угодил в больницу, поэтому не сразу отвечаю. Вы наверное и сами разобрались. У вас браузер сообщает, что вы стучитесь не по тому ресурсу api при запросе product. Ну это лего, уберите приставку api, она перестанет дублироваться.

export const fetchAllProducts = async (categoryId, brandId, page, limit= 5) => {
    const {data} = await guestInstance.get('/product', {params: {
            categoryId, brandId, page, limit
        }})
    console.log(data);
    return data
}

Затем проверьте, точно ли параметры нужно передавать во вложенном объекте, а не более стандартным способом:

export const fetchAllProducts = async (categoryId, brandId, page, limit= 5) => {
    const {data} = await guestInstance.get('/product', {
            categoryId, brandId, page, limit
        })
    console.log(data);
    return data
}