BigcommerceNetworkError: Fetch to Bigcommerce failed: The "name" argument must be of type string. Received null

[Tormand]

When using

import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'

const addItem = useAddItem();
const addToCart = async () => {
  await addItem({
    productId: product.id,
  });
};

I get this error:

BigcommerceNetworkError: Fetch to Bigcommerce failed: The "name" argument must be of type string. Received null
at new BigcommerceNetworkError (\node_modules\@bigcommerce\storefront-data-hooks\api\utils\errors.js:47:28)
at Object.<anonymous> (\node_modules\@bigcommerce\storefront-data-hooks\api\utils\fetch-store-api.js:72:27)
at step (\node_modules\@bigcommerce\storefront-data-hooks\api\utils\fetch-store-api.js:44:23)
at Object.throw (\node_modules\@bigcommerce\storefront-data-hooks\api\utils\fetch-store-api.js:25:53)
at rejected (\node_modules\@bigcommerce\storefront-data-hooks\api\utils\fetch-store-api.js:17:65)

My pages\api\bigcommerce\cart.ts looks like this:

import cartApi from '@bigcommerce/storefront-data-hooks/api/cart';

export default cartApi();

Example of my .env variables:

BIGCOMMERCE_STOREFRONT_API_URL=https://{domain}.mybigcommerce.com/graphql
BIGCOMMERCE_STOREFRONT_API_TOKEN=''
BIGCOMMERCE_STORE_API_URL=''
BIGCOMMERCE_STORE_API_TOKEN=''
BIGCOMMERCE_STORE_API_CLIENT_ID=''
BIGCOMMERCE_CHANNEL_ID=

[jorgemasta]

Hi @Tormand, thanks for opening the issue.

Can you send the Request Payload? (Dev Tools -> Network -> Cart Request -> Request Payload)

Looks like you're sending the product name but that's strange 🤔

[Tormand]

Hi @jorgemasta My payload looks like this:

{
  "item": {
    "productId":281
  },
  "locale":"en-US"
}

In \node_modules\@bigcommerce\storefront-data-hooks\api\utils\fetch-store-api (__awaiter function), it dosen't contain any arguments. Shouldn't it contain the payload?

thisArg contains the correct values(as far as I can see):

{
   "commerceUrl":"BIGCOMMERCE_STOREFRONT_API_URL from .env",
   "apiToken":"BIGCOMMERCE_STOREFRONT_API_TOKEN from .env",
   "cartCookie":"bc_cartId",
   "cartCookieMaxAge":2592000,
   "applyLocale":true,
   "storeApiUrl":"BIGCOMMERCE_STORE_API_URL from .env",
   "storeApiToken":"BIGCOMMERCE_STORE_API_TOKEN from .env",
   "storeApiClientId":"BIGCOMMERCE_STORE_API_CLIENT_ID from .env",
   "storeChannelId":"BIGCOMMERCE_CHANNEL_ID from .env",
   "customerCookie":"SHOP_TOKEN"
}

[Tormand]

I can see in fetchStoreApi it sends the correct body in ``options:

body: "{\"line_items\":[{\"quantity\":1,\"product_id\":281}],\"channel_id\":\"10\",\"locale\":\"en-US\"}"

endpoint has the value "/v3/carts"

[Tormand]

I tried setting up https://github.com/vercel/commerce with the same .env variabels, and I get same error. Now I have a feeling my BIGCOMMERCE_STOREFRONT_API_TOKEN might not be correctly created.

I created my token from https://developer.bigcommerce.com/api-reference/store-management/tokens/api-token/createtoken with

{
  "channel_id": 10,
  "expires_at": 1664950310,
  "allowed_cors_origins": [
    "http://localhost:3001"
  ]
}

[jorgemasta]

Yeah... it's strange.

We have this gist to add BIGCOMMERCE_STOREFRONT_API_TOKEN to .env.

I hope you find it useful.

[Tormand]

Hey @jorgemasta I found the issue was in my .env. The BIGCOMMERCE_STORE_API_URL was missing the whole url(https://api.bigcommerce.com/stores/{{store-hash}}), I just inserted the store hash.

[jorgemasta]

Happy you were able to resolve it.

And thank you for letting us know and closing the ticket!

El mié., 13 oct. 2021 9:40, Martin Larsen @.***> escribió:

Hey @jorgemasta https://github.com/jorgemasta I found the issue was in my .env. The BIGCOMMERCE_STORE_API_URL was missing the whole url( https://api.bigcommerce.com/stores/{{store-hash}}/), I just inserted the store hash.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bigcommerce/storefront-data-hooks/issues/98#issuecomment-942068546, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG2GCQNEOSD3FFVHF36TLBDUGVAXNANCNFSM5FI4QY2Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.