Creating custom object in custom application

[nikhilkni]

Hi, I'm trying to create a custom object in a custom application, It throws errors like 400, 401, and 406. Can you please suggest how can I resolve this error?
Here is the code that I'm using

import {
    buildApiUrl,
    executeHttpClientRequest,
} from '@commercetools-frontend/application-shell';

export const fetcherForwardTo = async (targetUrl, payload) => {
    const data = await executeHttpClientRequest(
        async (options) => {
            console.log("options", options)
            if (payload) {
                options.method = 'POST'
                options.headers = payload.headers
                options.body = JSON.stringify(payload.body)
            }
            const res = await fetch(buildApiUrl('/proxy/ctp/import-api-dev-2/custom-objects'), options);
            const data = res.json();
            return {
                data,
                statusCode: res.status,
                getHeader: (key) => res.headers.get(key),
            };
        },
        {
            headers: {
                "Content-Type": "application/json",
            },
            forwardToConfig: {
                uri: targetUrl
            },

        }
    );
    return data;
};

`const YOUR_ACCESS_TOKEN = ''
export const createCustomObject = async (draft) => {
    console.log("sessionToken", window.sessionStorage.getItem('sessionToken'))
    try {
        const response = await fetcherForwardTo(
            `https://api.us-central1.gcp.commercetools.com/${projectKey}/custom-objects`, {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${window.sessionStorage.getItem('sessionToken')}`,
                    'Content-Type': 'application/json',
                },
                body: draft,
            }
        );
        if (!response.ok) {
            throw new Error('Failed to create custom object');
        }
        const customObject = await response.json();
        console.log('Custom object created:', customObject);
    } catch (error) {
        console.error('Error creating custom object:', error.message);
    }
};`

[Rhotimee]

Hey @nikhilkni,

Your code is throwing HTTP 400, 401, and 406 errors due to potential issues with the request structure, authentication, and missing or misconfigured headers.

1. Could you check the payload structure in fetcherForwardTo for any syntax issues?
2. Include the 'Accept' header in your request to avoid the 406 error.

Also, the res.json() is a promise and should be awaited, like this: const data = await res.json().

Lastly, don't forget to provide the required headers (Accept-version, X-Forward-To, X-Forward-To-Audience-Policy, X-Project-Key) when using the /proxy/forward-to endpoint.

If you're still having trouble, it would be helpful to see the exact error message and potentially more context about the request you're making.

[nikhilkni]

I want to make a call to commercetools custom object endpoint for creating a custom object with the following draft

const draft = {
  container: "customer_preferences", 
  key: "notification_settings", 
    value: {
    email_notifications: true,
    push_notifications: false, 
    sms_notifications: true, 
    preferred_language: "en",  
  },
};

[kark]

Hey @nikhilkni,

Kindly try this snippet and let us know if it works for you.

const fetcher = async (url, config = {}) => {
  let headers;
  const data = await executeHttpClientRequest(
    async (options) => {
      headers = { ...options.headers, ...config.headers };
      const res = await fetch(buildApiUrl(url), { ...config, headers });
      const data = res.json();
      return {
        data,
        statusCode: res.status,
        getHeader: (key) => res.headers.get(key),
      };
    },
    { headers }
  );
  return data;
};

export const createCustomObject = async () => {
  try {
    const customObject = await fetcher(`/${projectKey}/custom-objects`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        container: 'customer_preferences',
        key: 'notification_settings',
        value: {
          email_notifications: true,
          push_notifications: false,
          sms_notifications: true,
          preferred_language: 'en',
        },
      }),
    });
    console.log('Custom object created:', customObject);
  } catch (error) {
    console.error('Error creating custom object:', error.message);
  }
};

Please make sure you follow guidelines from the data fetching section in docs.
Also, if you test it in the Merchant Center, make sure that the user has all the necessary OAuth scopes. See more here.

[nikhilkni]

Thankyou so much it works for me