T
TanStack15mo ago
sunny-green

useQuery is not a function for 'UseDummy'

Hello all, I’m using React Query to fetch data from my database (“UseAllDummies” gets all dummies, and “UseDummy” gets one dummy by its unique id). The UseAllDummies query function works fine, but the UseDummy one does not. I’m passing the unique id from the url params in nextjs. I get this error that useDummy is not a function. Queries:
import { type DummyDto } from "@bookwave/api-client";
import { useQuery } from "@tanstack/react-query";
import { apiClient } from "@/lib/api/api-client";
import { captureAndRethrowException } from "@/lib/error/capture-and-rethrow-exception";


enum DummyApiEndpoint {
FetchAll = "DummyApiEndpointFetchAll",
FetchOne = "DummyApiEndpointFetchOne",
}


export const DummyApiKeys = {
fetchAll: () => [DummyApiEndpoint.FetchAll] as const,
fetchOne: (id: string) => [DummyApiEndpoint.FetchOne, id] as const,
} as const;


export const useAllDummies = () => {
return useQuery({
queryKey: DummyApiKeys.fetchAll(),
queryFn: fetchDummies,
});
};


export const useDummy = (id: string) => {
return useQuery({
queryKey: DummyApiKeys.fetchOne(id),
queryFn: () => fetchDummy(id),
});
};


async function fetchDummies(): Promise<DummyDto[]> {
try {
const response = await apiClient.dummy.fetchAllDumies();
return response;
} catch (err: unknown) {
captureAndRethrowException(err);
}
}


async function fetchDummy(dummyId: string): Promise<DummyDto> {
try {
const response = await apiClient.dummy.fetchOne(dummyId);
return response;
} catch (err: unknown) {
captureAndRethrowException(err);
}
}
import { type DummyDto } from "@bookwave/api-client";
import { useQuery } from "@tanstack/react-query";
import { apiClient } from "@/lib/api/api-client";
import { captureAndRethrowException } from "@/lib/error/capture-and-rethrow-exception";


enum DummyApiEndpoint {
FetchAll = "DummyApiEndpointFetchAll",
FetchOne = "DummyApiEndpointFetchOne",
}


export const DummyApiKeys = {
fetchAll: () => [DummyApiEndpoint.FetchAll] as const,
fetchOne: (id: string) => [DummyApiEndpoint.FetchOne, id] as const,
} as const;


export const useAllDummies = () => {
return useQuery({
queryKey: DummyApiKeys.fetchAll(),
queryFn: fetchDummies,
});
};


export const useDummy = (id: string) => {
return useQuery({
queryKey: DummyApiKeys.fetchOne(id),
queryFn: () => fetchDummy(id),
});
};


async function fetchDummies(): Promise<DummyDto[]> {
try {
const response = await apiClient.dummy.fetchAllDumies();
return response;
} catch (err: unknown) {
captureAndRethrowException(err);
}
}


async function fetchDummy(dummyId: string): Promise<DummyDto> {
try {
const response = await apiClient.dummy.fetchOne(dummyId);
return response;
} catch (err: unknown) {
captureAndRethrowException(err);
}
}
No description
2 Replies
adverse-sapphire
adverse-sapphire15mo ago
”use client”
sunny-green
sunny-greenOP15mo ago
Thank you! @M00LTi

Did you find this page helpful?