T
TanStack•2y ago
metropolitan-bronze

separated function cannot be added as a queryFunction

Hello! I currently have the problem that my separate function that makes the API call is not declared as queryFunction. The function: 
export const getLineupById = async ({ id }: Pick<Lineup, "id">) => {
    try {

        const data = await axios.get(`/api/lineup/${id}/get`);

        return data;
    } catch (error) {
        console.log(error, 'SERVER_ERROR')
        return { error: error };
    }
};
export const getLineupById = async ({ id }: Pick<Lineup, "id">) => {
    try {

        const data = await axios.get(`/api/lineup/${id}/get`);

        return data;
    } catch (error) {
        console.log(error, 'SERVER_ERROR')
        return { error: error };
    }
};
I include them as follows: 
const { data, isLoading, isError } = useQuery({
        queryKey: ['lineup'],
        queryFn: () => getLineupById({id: props.lineupId})
    })
const { data, isLoading, isError } = useQuery({
        queryKey: ['lineup'],
        queryFn: () => getLineupById({id: props.lineupId})
    })
But I get this error: 
./node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>
./node_modules/.pnpm/@mapbox+node-pre-gyp@1.0.11/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!doctype html>
| <html>
| <head>
If i include the function directly like this ... 
const { data, isLoading, isError } = useQuery({
        queryKey: ['lineup'],
        queryFn: async () => {
            const data = await axios.get(`/api/lineup/${props.lineupId}/get`);
            return data.data as Lineup;
        }
    })
const { data, isLoading, isError } = useQuery({
        queryKey: ['lineup'],
        queryFn: async () => {
            const data = await axios.get(`/api/lineup/${props.lineupId}/get`);
            return data.data as Lineup;
        }
    })
... then it works without any problems. What am I doing wrong here? [NextJS 13.4, App Router]
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?