fetchAllCollections() is not a function

Gusmagnago
New Member
1 0 0

Hello, im trying to call my collections as a list to show up on the Menu component.

shopContext.js

following this model https://shopify.github.io/js-buy-sdk/#builds :

 

import React, { Component } from "react";
import Client from "shopify-buy";

const ShopContext = React.createContext();

const client = Client.buildClient({
  storefrontAccessToken: " ",
  domain: " ",
});

class ShopProvider extends Component {
  state = {
    collections: [],
    collection: {},
    products: [],
    product: {},
    checkout: {},
    isCartOpen: false,
    test: "test",
  };

  componentDidMount() {
    //check if localstorage has a checkout_id saved
    if (localStorage.checkout) {
      this.fetchCheckout(localStorage.checkout);
    } else {
      this.createCheckout();
    }

    //if theres no checkout_id in localstorage then we will create a new checkout

    //else fetch checkout from shopify
  }

  createCheckout = async () => {
    const checkout = await client.checkout.create();
    localStorage.setItem("checkout", checkout.id);
    this.setState({ checkout: checkout });
  };

  fetchCheckout = async (checkoutId) => {
    client.checkout
      .fetch(checkoutId)
      .then((checkout) => {
        this.setState({ checkout: checkout });
      })
      .catch((err) => console.log(err));
  };

  addItemToCheckout = async (variantId, quantity) => {
    const lineItemsToAdd = [
      {
        variantId,
        quantity: parseInt(quantity, 10),
      },
    ];

    const checkout = await client.checkout.addLineItems(
      this.state.checkout.id,
      lineItemsToAdd
    );
    this.setState({ checkout: checkout });
  };

  fetchAllCollections = async () => {
    const collections = await client.collection.fetchAll();

    this.setState({ collections: collections });
  };

  fetchCollectionWithId = async (id) => {
    const collection = await client.collection.fetch(id);

    this.setState({ collection: collection });
  };

  fetchAllProducts = async () => {
    const products = await client.product.fetchAll();

    this.setState({ products: products });
  };

  fetchProductWithId = async (id) => {
    const product = await client.product.fetch(id);

    this.setState({ product: product });
  };

 

 and also the Menu component:

 

import React, { useContext, useEffect } from "react";
import { ShopContext } from "../context/shopContext";
import { Anchor, Div } from "atomize";

const Menu = () => {
  const { fetchAllCollections, collections } = useContext(ShopContext);

  useEffect(() => {
    fetchAllCollections();

    return () => {};
  }, [fetchAllCollections]);

  if (!collections) return <Div>There's no collections</Div>;

  return (
    <Div>
      {collections.map((collection) => {
        return (
          <Anchor d="block" p={{ y: "0.25rem" }}>
            {{ collection }}
          </Anchor>
        );
      })}
    </Div>
  );
};

export default Menu;

 

0 Likes