T
TanStack•4y ago
like-gold

Simple Example does not work

Simple example: https://tanstack.com/query/v4/docs/examples/react/simple I'm using typescript and redux. I had to make a couple changes, but here's the file: 
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import axios from "axios";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const { isLoading, error, data, isFetching } = useQuery(["repoData"], () =>
    axios
      .get("https://api.github.com/repos/tannerlinsley/react-query")
      .then((res) => res.data)
  );

  if (isLoading) return <>Loading...</>;

  if (error) return <>An error has occurred:  + {(error as any).message}</>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement as HTMLElement).render(<App />);
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import axios from "axios";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const { isLoading, error, data, isFetching } = useQuery(["repoData"], () =>
    axios
      .get("https://api.github.com/repos/tannerlinsley/react-query")
      .then((res) => res.data)
  );

  if (isLoading) return <>Loading...</>;

  if (error) return <>An error has occurred:  + {(error as any).message}</>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement as HTMLElement).render(<App />);
React Query Simple Example | TanStack Query Docs
An example showing how to implement Simple in React Query
4 Replies
like-gold
like-goldOP•4y ago
Here are the error messages
No description
like-gold
like-goldOP•4y ago
- "Invalid hook call. Hooks can only be called inside of the body of a function component." - "Cannot read properties of null (reading 'useRef')" - "The above error occurred in the <ReactQueryDevtools> component:"
like-gold
like-goldOP•4y ago
Project directory
No description
like-gold
like-goldOP•4y ago
All of my react versions match (via npm list --pattern react): 
> npm list --pattern react
<PWD>
├─┬ @tanstack/react-query@4.12.0
│ ├── react@18.2.0 deduped
│ └─┬ use-sync-external-store@1.2.0
│   └── react@18.2.0 deduped
├─┬ @testing-library/react@13.4.0
│ └── react@18.2.0 deduped
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-redux@8.0.4
│ └── react@18.2.0 deduped
├─┬ react-scripts@5.0.1
│ └── react@18.2.0 deduped
└── react@18.2.0
> npm list --pattern react
<PWD>
├─┬ @tanstack/react-query@4.12.0
│ ├── react@18.2.0 deduped
│ └─┬ use-sync-external-store@1.2.0
│   └── react@18.2.0 deduped
├─┬ @testing-library/react@13.4.0
│ └── react@18.2.0 deduped
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-redux@8.0.4
│ └── react@18.2.0 deduped
├─┬ react-scripts@5.0.1
│ └── react@18.2.0 deduped
└── react@18.2.0
For whatever reason, <ReactQueryDevtools initialIsOpen /> was breaking everything. Removing just this fixed it. Would still like to know why

Did you find this page helpful?