T
tRPC

tRPC querying data via function not working

tRPC querying data via function not working

Aaminoxix
View on Discord
8/27/2023
In the below code, fetchSocialMediaData is logging themeId but, not response, getting error as mentioned in the screenshot attached. Is there anything I missed from docs? Correct me wherever I am wrong. 
type SocialMediaData = {
    id: string;
    createdAt: Date;
    updatedAt: Date;
    copySocialMediaType: "HASHTAGS" | "POST";
    copySocialMediaCopy: string;
    organizationId: string;
    themeId: string;
    userId: string;
  };

  const [themeIds, setThemeIds] = useState<string[]>([]);
  const [arrayToStoreSocialData, setArrayToStoreSocialData] = useState<
    SocialMediaData[]
  >([]);

  const {
    data: allCreateSocialsData,
    isLoading: isLoadingCreateSocials,
    error: errorCreateSocials,
  } = api.createSocialPost.getAllCreateSocialPosts.useQuery();

  const fetchAndSetThemeIds = () => {
    try {
      const fetchedThemeIds: string[] | undefined =
        allCreateSocialsData?.map((socialPost) => socialPost.themeId) || [];
      setThemeIds(fetchedThemeIds);
    } catch (error) {
      console.error("Error fetching theme IDs:", error);
    }
  };

  console.log("themeIds", themeIds);

  useEffect(() => {
    fetchAndSetThemeIds();
  }, [allCreateSocialsData]);

  const fetchSocialMediaData = (themeId: string) => {
    try {
      console.log("themeId", themeId);
      const response =
        api.copySocialMedia.getAllSocialMediaCopyOfTheme.useQuery({
          themeId: themeId,
        });

      console.log("response", response);

      const socialMediaData: SocialMediaData[] = response?.data || [];

      setArrayToStoreSocialData((prevData) => [
        ...prevData,
        ...socialMediaData,
      ]);
    } catch (error) {
      console.error("Error fetching social media data:", error);
    }
  };

  useEffect(() => {
    themeIds.forEach((themeId) => {
      fetchSocialMediaData(themeId);
    });
  }, [themeIds]);

  console.log("arrayToStoreSocialData", arrayToStoreSocialData);
type SocialMediaData = {
    id: string;
    createdAt: Date;
    updatedAt: Date;
    copySocialMediaType: "HASHTAGS" | "POST";
    copySocialMediaCopy: string;
    organizationId: string;
    themeId: string;
    userId: string;
  };

  const [themeIds, setThemeIds] = useState<string[]>([]);
  const [arrayToStoreSocialData, setArrayToStoreSocialData] = useState<
    SocialMediaData[]
  >([]);

  const {
    data: allCreateSocialsData,
    isLoading: isLoadingCreateSocials,
    error: errorCreateSocials,
  } = api.createSocialPost.getAllCreateSocialPosts.useQuery();

  const fetchAndSetThemeIds = () => {
    try {
      const fetchedThemeIds: string[] | undefined =
        allCreateSocialsData?.map((socialPost) => socialPost.themeId) || [];
      setThemeIds(fetchedThemeIds);
    } catch (error) {
      console.error("Error fetching theme IDs:", error);
    }
  };

  console.log("themeIds", themeIds);

  useEffect(() => {
    fetchAndSetThemeIds();
  }, [allCreateSocialsData]);

  const fetchSocialMediaData = (themeId: string) => {
    try {
      console.log("themeId", themeId);
      const response =
        api.copySocialMedia.getAllSocialMediaCopyOfTheme.useQuery({
          themeId: themeId,
        });

      console.log("response", response);

      const socialMediaData: SocialMediaData[] = response?.data || [];

      setArrayToStoreSocialData((prevData) => [
        ...prevData,
        ...socialMediaData,
      ]);
    } catch (error) {
      console.error("Error fetching social media data:", error);
    }
  };

  useEffect(() => {
    themeIds.forEach((themeId) => {
      fetchSocialMediaData(themeId);
    });
  }, [themeIds]);

  console.log("arrayToStoreSocialData", arrayToStoreSocialData);
No description
Wwleistra
View on Discord
8/28/2023
The error is pretty self explanatory. You are calling a hook somewhere that is not a hook or component. I cannot see from your code example what the problem is but if you have your code snippet running in a function try rename it as useFetchSocialData or make sure the code is ran as part of the top level of a component. You can also not call a hook conditionally (inside an if) so keep that in mind as well. Also your fetch functions should be probably inside the useEffects or using a useCallback if they are called from other places and your useEffects currently have missing dependencies on the dependency array. They are now recreated on every rerender.

Looking for more? Join the community!

T
tRPC

tRPC querying data via function not working

Join Server
Recommended Posts
Next.js app router + TRPC...how to set it up?> **Note** > You can already use tRPC with app directory, by: > > - using `@trpc/client` directly inHow do I setup App router + TRPC + Lucia Auth? (protected routes)I'm trying to setup tRPC with Lucia in app router but I struggle to make protected routes work. I mNEXT.JS / Serverless AWSConfigured trpc locally. Everything works great. When deploying via serverless on aws - mutations doHow do I set a context dynamically?I don't fully understand middleware in trpc and especially using it for adminProcedures. So my trpcHow to make LoaderAndError component which is type safe?I i have a query like this `const { data, isLoading, isError } = trpc.settings.get.useQuery();` NowTRPC vanilla client load failed when called on mobile browserHi, I have created a vanilla client to use TRPC without hooks in a NextJS project: ``` import { cre