How to put the data fetched from API in Zustand?

[Rope-a-dope]

Have been struggling for a whole day and got all kinds of warnings/errors.

I want to convert the fetching part to React Query. Initially, we use useEffect to fetch the data. Now what should I do if I want to change that to React Query? If I use React Query directly in the compoent and then call setState function to set feedbackItems, then I got warning: "Cannot update a component while rendering a different component". And the page seems to be rendered many times with no response. Could anyone please help? Thank you!

import { create } from "zustand";
import { TFeedbackItem } from "../lib/types";

type Store = {
  feedbackItems: TFeedbackItem[];
  isLoading: boolean;
  errorMessage: string;
  selectedCompany: string;
  actions: {
    getCompanyList: () => string[];
    getFilteredFeedbackItems: () => TFeedbackItem[];
    addItemToList: (text: string) => Promise<void>;
    selectCompany: (company: string) => void;
    fetchFeedbackItems: () => Promise<void>;
  };
};

export const useFeedbackItemsStore = create<Store>((set, get) => ({
  feedbackItems: [],
  isLoading: false,
  errorMessage: "",
  selectedCompany: "",
  actions: {
    getCompanyList: () => {
      const state = get();
      return state.feedbackItems
        .map((item) => item.company)
        .filter((company, index, array) => {
          return array.indexOf(company) === index;
        });
    },
    getFilteredFeedbackItems: () => {
      const state = get();

      return state.selectedCompany
        ? state.feedbackItems.filter(
            (feedbackItem) => feedbackItem.company === state.selectedCompany
          )
        : state.feedbackItems;
    },
    addItemToList: async (text: string) => {
      const companyName = text
        .split(" ")
        .find((word) => word.includes("#"))!
        .substring(1);

      const newItem: TFeedbackItem = {
        id: new Date().getTime(),
        text: text,
        upvoteCount: 0,
        daysAgo: 0,
        company: companyName,
        badgeLetter: companyName.substring(0, 1).toUpperCase(),
      };

      set((state) => ({
        feedbackItems: [...state.feedbackItems, newItem],
      }));

      await fetch(
        "https://bytegrad.com/course-assets/projects/corpcomment/api/feedbacks",
        {
          method: "POST",
          body: JSON.stringify(newItem),
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
        }
      );
    },
    selectCompany: (company: string) => {
      set(() => ({
        selectedCompany: company,
      }));
    },
    fetchFeedbackItems: async () => {
      set(() => ({
        isLoading: true,
      }));

      try {
        const response = await fetch(
          "https://bytegrad.com/course-assets/projects/corpcomment/api/feedbacks"
        );

        if (!response.ok) {
          throw new Error();
        }

        const data = await response.json();
        set(() => ({
          feedbackItems: data.feedbacks,
        }));
      } catch (error) {
        set(() => ({
          errorMessage: "Something went wrong. Please try again later.",
        }));
      }

      set(() => ({
        isLoading: false,
      }));
    },
  },
}));

export const useFeedbackItems = () => useFeedbackItemsStore((state) => state.feedbackItems);
export const useIsLoading = () => useFeedbackItemsStore((state) => state.isLoading);
export const useErrorMessage = () => useFeedbackItemsStore((state) => state.errorMessage);
export const useSelectedCompany = () => useFeedbackItemsStore((state) => state.selectedCompany);
export const useFeedbackItemActions = () => useFeedbackItemsStore((state) => state.actions);
export const useCompanyList = () => useFeedbackItemsStore((state) => state.actions.getCompanyList());
export const useFilteredFeedbackItems = () => useFeedbackItemsStore((state) => state.actions.getFilteredFeedbackItems());

import { useEffect } from "react";
import { useFeedbackItemActions } from "../stores/feedbackItemsStore";
import HashtagList from "./hashtag/HashtagList";
import Container from "./layout/Container";
import Footer from "./layout/Footer";

function App() {
  const { fetchFeedbackItems } = useFeedbackItemActions();

  useEffect(() => {
    fetchFeedbackItems();
  }, [fetchFeedbackItems]);

  return (
    <div className="app">
      <Footer />

      <Container />

      <HashtagList />
    </div>
  );
}

export default App;

FeedbackList.tsx is inside container.

import {
  useErrorMessage,
  useFilteredFeedbackItems,
  useIsLoading
} from "../../stores/feedbackItemsStore";
import ErrorMessage from "../ErrorMessage";
import Spinner from "../Spinner";
import FeedbackItem from "./FeedbackItem";

export default function FeedbackList() {
  const isLoading = useIsLoading();
  const errorMessage = useErrorMessage();
  const filteredFeedbackItems = useFilteredFeedbackItems();

  return (
    <ol className="feedback-list">
      {isLoading && <Spinner />}

      {errorMessage && <ErrorMessage message={errorMessage} />}

      {filteredFeedbackItems.map((feedbackItem) => (
        <FeedbackItem key={feedbackItem.id} feedbackItem={feedbackItem} />
      ))}
    </ol>
  );
}

[dbritto-dev]

@Rope-a-dope would you mind sharing us a minimal demo/repro on stackblitz?

[Rope-a-dope]

@Rope-a-dope would you mind sharing us a minimal demo/repro on stackblitz?

Thank you! Please see the link below, but it is not minimal. But I think we only need to check three files:
feedbackItemsStore.ts, App.tsx, FeedbackList.tsx. All I need is to use React Query to fetch the data. Also, how do we deal with isLoading and errorMessage? I think that is derived from useQuery, but I'm not sure how to implement it.

Corp-Comment

[dbritto-dev]

@Rope-a-dope the link doesn't work

[Rope-a-dope]

@Rope-a-dope the link doesn't work

Sorry, I wrote the wrong format for the url. Could you please try this? Thank you!

Corp-Comment

[dbritto-dev]

@Rope-a-dope I guess a minimal repro with react query would be needed, without that would be difficult to replicate your issue and fix it

[Rope-a-dope]

@Rope-a-dope I guess a minimal repro with react query would be needed, without that would be difficult to replicate your issue and fix it

Thanks a lot! I'm new to this and have problems to get a minimal repro. But really thanks a lot for your quick reply. I finally figured it out, but not sure if this is the best practice. I use useEffect to setState because I found this statement from this article.

Before version 5 of React Query, this was accomplished by passing an onSuccess callback function. Since version 5, the onSuccess function is deprecated, and now it can be done using a regular useEffect.

Is this the best practice to use useEffect to call setState in Zustand to put the result of React Query in the store?

const fetchFeedbackItems = async () => {
  const response = await fetch('https://bytegrad.com/course-assets/projects/corpcomment/api/feedbacks');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  const data = await response.json();
  return data.feedbacks;
};

export const useFetchFeedbackItems = () => {
  const { setFeedbackItems } = useFeedbackItemActions();

  const {data, isLoading, error} = useQuery({
    queryKey: ['feedbackItems'],
    queryFn: fetchFeedbackItems,
  });

  useEffect(() => {
    setFeedbackItems(data || []);
}, [data, setFeedbackItems]); 
  return {isLoading, error};
};