Downgrade react query from v5 to v4 (#500)

* Remove sample-netflix from examples

* Fix downgrade react-query from v5 to v4
Some users are still in older versions of React like React 16 or 17. We
moved back to react-query@v4 because v5 was using `useAsyncExternalStore`. We want to be more backwards compatible

.changeset/angry-planes-collect.md

@@ -0,0 +1,5 @@
+---
+"@latitude-data/react": patch
+---
+
+Make @latitude-data/react compatible with react 16 and 17

packages/client/react/.eslintrc.cjs

@@ -5,6 +5,11 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:react-hooks/recommended"
   ],
+  settings: {
+    react: {
+      version: "detect"
+    }
+  },
   rules: {
     "react/react-in-jsx-scope": "off",
     "react/display-name": "off",

packages/client/react/package.json

@@ -31,7 +31,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
-    "@tanstack/react-query": "^5.28.14",
+    "@tanstack/react-query": "^4.35.3",
     "@tanstack/react-table": "^8.16.0",
     "class-variance-authority": "^0.7.0",
     "echarts": "^5.5.0",
@@ -44,8 +44,8 @@
     "use-prefers-color-scheme": "^1.1.3"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
   },
   "devDependencies": {
     "@latitude-data/eslint-config": "workspace:*",

packages/client/react/src/MainProvider.tsx

@@ -1,3 +1,4 @@
+import { FC } from 'react'
 import { LatitudeApiProvider, type QueryClientProviderProps } from './data'
 import { LatitudeThemeProvider, type ThemeProviderProps } from './lib'
 
@@ -6,12 +7,12 @@ type LatitudeProviderProps = QueryClientProviderProps &
     theme?: false | ThemeProviderProps['theme']
   }
 
-function LatitudeProvider({
+const LatitudeProvider: FC<LatitudeProviderProps> = ({
   children,
   theme,
   mode,
   ...props
-}: LatitudeProviderProps) {
+}: LatitudeProviderProps) => {
   return (
     <LatitudeApiProvider {...props}>
       {theme !== false ? (

packages/client/react/src/data/useQuery.ts

@@ -29,7 +29,7 @@ export function useQuery({
     () => [createQueryKey(queryPath, params)],
     [queryPath, params],
   )
-  const query = useReactQuery({
+  const query = useReactQuery<QueryResultPayload>({
     ...tanstaskQueryOptions,
     queryKey: queryKeyProp,
     queryFn: async () => api.getQuery({ queryPath, params }),
@@ -68,6 +68,7 @@ export function useQuery({
 
   return {
     ...query,
+    error: query.error as Error,
     compute,
     download,
     isDownloading,

packages/client/react/src/lib/ui/column/index.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { theme } from '@latitude-data/client'
-interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+import { HTMLAttributes, forwardRef } from 'react'
+interface Props extends HTMLAttributes<HTMLDivElement> {}
 
-const Column = React.forwardRef<HTMLDivElement, Props>(
+const Column = forwardRef<HTMLDivElement, Props>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}