javascript - Getting Missing queryFn error when using React query - Stack Overflow

admin管理员组

文章数量:1022705

here is the code I am using. it doesn't make any sense to me because the error is basically telling me I am not passing it a function when using query but I am. and I am not calling the function directly either. any help would be a appreciated

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";
//import Posts from './ponents/Posts'
import axios from "axios";
import { useQuery } from "react-query";
import React from "react";

async function fetchPosts() {
  const data = await fetch("/api/planetsd");
  return data.json();
}

function App() {
  const { data, status, error } = useQuery(
    "stuffthing",
    async () => await fetchPosts()
  );
  // first argumello\'ent is a string to cache and track the query result
  if (status === "error") {
    console.log(`${error} new error`);
  }
  if (status === "loading") {
    return <div>loading</div>;
  }

  return (
    <div className="container">
      <h1>Posts</h1>
      {data}
    </div>
  );
}

export default App;

here is the code I am using. it doesn't make any sense to me because the error is basically telling me I am not passing it a function when using query but I am. and I am not calling the function directly either. any help would be a appreciated

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";
//import Posts from './ponents/Posts'
import axios from "axios";
import { useQuery } from "react-query";
import React from "react";

async function fetchPosts() {
  const data = await fetch("http://swapi.dev/api/planetsd");
  return data.json();
}

function App() {
  const { data, status, error } = useQuery(
    "stuffthing",
    async () => await fetchPosts()
  );
  // first argumello\'ent is a string to cache and track the query result
  if (status === "error") {
    console.log(`${error} new error`);
  }
  if (status === "loading") {
    return <div>loading</div>;
  }

  return (
    <div className="container">
      <h1>Posts</h1>
      {data}
    </div>
  );
}

export default App;

• javascript
• reactjs
• react-query

Share Improve this question Follow edited Jul 31, 2022 at 23:59 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Jul 31, 2022 at 23:46 cjgardner99cjgardner99 911 silver badge22 bronze badges 4

• Please edit your question to include the actual error message, in full please – Phil Commented Jul 31, 2022 at 23:57
• You appear to be using the deprecated react-query library. You should be using @tanstack/react-query instead – Phil Commented Aug 1, 2022 at 0:12
• I'm most likely following the same tutorial as you, and got exactly the same problem. – Paolo Tedesco Commented Aug 1, 2022 at 14:13
• @PaoloTedesco did you use newest react-query? – Konrad Commented Aug 1, 2022 at 17:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I just ran into the exact same issue and it took me wayyy too long to figure out what was going on. If you're following the documentation of v3, useQuery would indeed be used as such:

const { data, status, error } = useQuery("posts", async () => await fetchPosts());

However, in v4 it has changed to take an array as a first parameter:

const { data, status, error } = useQuery(["posts"], async () => await fetchPosts());

Three hours of my life I'll never get back.

here is the code I am using. it doesn't make any sense to me because the error is basically telling me I am not passing it a function when using query but I am. and I am not calling the function directly either. any help would be a appreciated

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";
//import Posts from './ponents/Posts'
import axios from "axios";
import { useQuery } from "react-query";
import React from "react";

async function fetchPosts() {
  const data = await fetch("/api/planetsd");
  return data.json();
}

function App() {
  const { data, status, error } = useQuery(
    "stuffthing",
    async () => await fetchPosts()
  );
  // first argumello\'ent is a string to cache and track the query result
  if (status === "error") {
    console.log(`${error} new error`);
  }
  if (status === "loading") {
    return <div>loading</div>;
  }

  return (
    <div className="container">
      <h1>Posts</h1>
      {data}
    </div>
  );
}

export default App;

here is the code I am using. it doesn't make any sense to me because the error is basically telling me I am not passing it a function when using query but I am. and I am not calling the function directly either. any help would be a appreciated

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";
//import Posts from './ponents/Posts'
import axios from "axios";
import { useQuery } from "react-query";
import React from "react";

async function fetchPosts() {
  const data = await fetch("http://swapi.dev/api/planetsd");
  return data.json();
}

function App() {
  const { data, status, error } = useQuery(
    "stuffthing",
    async () => await fetchPosts()
  );
  // first argumello\'ent is a string to cache and track the query result
  if (status === "error") {
    console.log(`${error} new error`);
  }
  if (status === "loading") {
    return <div>loading</div>;
  }

  return (
    <div className="container">
      <h1>Posts</h1>
      {data}
    </div>
  );
}

export default App;

• javascript
• reactjs
• react-query

Share Improve this question Follow edited Jul 31, 2022 at 23:59 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Jul 31, 2022 at 23:46 cjgardner99cjgardner99 911 silver badge22 bronze badges 4

• Please edit your question to include the actual error message, in full please – Phil Commented Jul 31, 2022 at 23:57
• You appear to be using the deprecated react-query library. You should be using @tanstack/react-query instead – Phil Commented Aug 1, 2022 at 0:12
• I'm most likely following the same tutorial as you, and got exactly the same problem. – Paolo Tedesco Commented Aug 1, 2022 at 14:13
• @PaoloTedesco did you use newest react-query? – Konrad Commented Aug 1, 2022 at 17:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I just ran into the exact same issue and it took me wayyy too long to figure out what was going on. If you're following the documentation of v3, useQuery would indeed be used as such:

const { data, status, error } = useQuery("posts", async () => await fetchPosts());

However, in v4 it has changed to take an array as a first parameter:

const { data, status, error } = useQuery(["posts"], async () => await fetchPosts());

Three hours of my life I'll never get back.

本文标签： javascriptGetting Missing queryFn error when using React queryStack Overflow