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

• 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

1 Answer 1

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.