How can I get a specific value from subCategory list

[cyrilmarceau]

Hello,

I'm trying to retrieve the backgroundImage property from a subcategory (I want get the details of subcategory)

So I fetch from the children API but I don't but by default I get these properties:

So in pages/category/[slug].ts:
api.categories.getChildren({ first: 100, id }).then(({ data }) => data),

id: "Q2F0ZWdvcnk6NTk="
name: "Sofas"
seoDescription: ""
seoTitle: ""
slug: "canapes"
__typename: "Category"

Where in the code should I specify the other values ​​I want to retrieve?

my expected result would be:

id: "Q2F0ZWdvcnk6NTk="
name: "Sofas"
seoDescription: ""
seoTitle: ""
slug: "canapes"
backgroundImage: {
url: "",
alt: ""
}
__typename: "Category"

because in the sdk the query allowing to retrieve the children of a category, by default it does not retrieve the backgroundImage property

[gleniat]

Anyone? I'd like to know this too.

I know where it comes from. If you edit a file in an external library saleor-sdk, you can get additional data.

Go to /app/node_modules/@saleor/sdk/lib/fragments/categories.js and add field you need to the exports.baseCategoryFragment query.

Now I'd like to know how to override it correctly without direct editing of library files?

[emendo-web]

Editing node_modules is not a good idea. If we install the project on another workstation we will not have the changes made. If there is a solution to edit I would like to know too.

[gleniat]

That's why I'd like to know how to override exports.baseategoryFragment in the correct way (my question in bold).

categories.js in saleor-sdk external library looks like this:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.categoryFragment = exports.baseCategoryFragment = void 0;
const graphql_tag_1 = __importDefault(require("graphql-tag"));
exports.baseCategoryFragment = graphql_tag_1.default `
  fragment BaseCategory on Category {
    id
    name
    slug
    seoDescription
    seoTitle
  }
`;

The same would apply for products. If I need a description on top of default query, which includes seoDescription only, I can edit the products.js file:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.productFragment = exports.productPricingFragment = exports.productVariantFragment = exports.selectedAttributeFragment = exports.baseProductFragment = void 0;
const graphql_tag_1 = __importDefault(require("graphql-tag"));
const checkout_1 = require("./checkout");
exports.baseProductFragment = graphql_tag_1.default `
  fragment BaseProduct on Product {
    id
    name
    slug
    seoDescription
    isAvailableForPurchase
    availableForPurchase
    seoTitle
    thumbnail {
      url
      alt
    }
    thumbnail2x: thumbnail(size: 510) {
      url
    }
  }
`;

When I add the description field to exports.baseProductFragment, I get a description data in storefront, which is great, but editing external library files is not the correct way how to do it. In the storefront code, there is only a simple line:

import { ProductList } from "@saleor/sdk/lib/queries/gqlTypes/ProductList";

I'd like to know how to override this line to get the data we need, without editing or monkey-patching the saleor-sdk external library files.