T
TanStack2y ago
like-gold

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
sensitive-blue
sensitive-blue2y ago
”use client”
like-gold
like-goldOP2y ago
Thank you! @M00LTi

Did you find this page helpful?