T
TanStack•3y ago
rival-black

Solid JS queryclient not available.

Hey folks. I was playing around with solidJS and I wanted to use tan stack query. I created my client, and my provider, wrapping my application, but when I tried to call any part of the library (useMutation, useQueryClient) I would get an error that the client isn't set. I double checked my work that the client passed as a prop to the provider is indeed not null: still nothing. Really not sure what Im doing wrong. I spun up a clone of the project using standard react and the exact same structure of code worked fine over there. Not really sure what I might be doing wrong in Solid. Any one have any suggestions for debugging this?
1 Reply
rival-black
rival-blackOP•3y ago
heres some code if that helps: 
// index.jsx
/* @refresh reload */
import { render } from "solid-js/web";

import App from "./App";
import AuthProvider from "./providers/AuthProvider";
import QueryProvider from "./providers/QueryProvider";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got mispelled?"
  );
}

render(
  () => (
    <div>
      <QueryProvider>
        <AuthProvider>
          <App />
        </AuthProvider>
      </QueryProvider>
    </div>
  ),
  root
);
// index.jsx
/* @refresh reload */
import { render } from "solid-js/web";

import App from "./App";
import AuthProvider from "./providers/AuthProvider";
import QueryProvider from "./providers/QueryProvider";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got mispelled?"
  );
}

render(
  () => (
    <div>
      <QueryProvider>
        <AuthProvider>
          <App />
        </AuthProvider>
      </QueryProvider>
    </div>
  ),
  root
);
//QueryProvider.jsx

import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";

export const queryClient = new QueryClient();

const QueryProvider = (props) => {
  return (
    <QueryClientProvider client={queryClient}>
      {props.children}
    </QueryClientProvider>
  );
};

export default QueryProvider;
//QueryProvider.jsx

import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";

export const queryClient = new QueryClient();

const QueryProvider = (props) => {
  return (
    <QueryClientProvider client={queryClient}>
      {props.children}
    </QueryClientProvider>
  );
};

export default QueryProvider;
//AuthProvider.jsx

import { createSignal, createContext, useContext } from "solid-js";
import { backendLogin } from "../services/login";
import { useQueryClient } from "@tanstack/solid-query";

export const AuthContext = createContext();

const LOCAL_STORAGE_TOKEN_KEY = "localStorageKey";

const AuthProvider = (props) => {
  const [token, setToken] = createSignal(
    localStorage.getItem(LOCAL_STORAGE_TOKEN_KEY)
  );
  const [isAuthenticated, setIsAuthenticated] = createSignal(false);
  const loginMutation = createMutation(backendLogin)
  function login({ username, password }) {    

    const queryClient = useQueryClient();
    loginMutation.mutate({username, password})
  }

  function logout() {
    setToken(null);
    setIsAuthenticated(false);
    localStorage.removeItem(LOCAL_STORAGE_TOKEN_KEY);
  }
  const state = {
    token,
    isAuthenticated,
    login,
    logout,
  };
  return (
    <AuthContext.Provider value={state}>{props.children}</AuthContext.Provider>
  );
};

export default AuthProvider;
export function useAuth() {
  return useContext(AuthContext);
}
//AuthProvider.jsx

import { createSignal, createContext, useContext } from "solid-js";
import { backendLogin } from "../services/login";
import { useQueryClient } from "@tanstack/solid-query";

export const AuthContext = createContext();

const LOCAL_STORAGE_TOKEN_KEY = "localStorageKey";

const AuthProvider = (props) => {
  const [token, setToken] = createSignal(
    localStorage.getItem(LOCAL_STORAGE_TOKEN_KEY)
  );
  const [isAuthenticated, setIsAuthenticated] = createSignal(false);
  const loginMutation = createMutation(backendLogin)
  function login({ username, password }) {    

    const queryClient = useQueryClient();
    loginMutation.mutate({username, password})
  }

  function logout() {
    setToken(null);
    setIsAuthenticated(false);
    localStorage.removeItem(LOCAL_STORAGE_TOKEN_KEY);
  }
  const state = {
    token,
    isAuthenticated,
    login,
    logout,
  };
  return (
    <AuthContext.Provider value={state}>{props.children}</AuthContext.Provider>
  );
};

export default AuthProvider;
export function useAuth() {
  return useContext(AuthContext);
}
the issue is whenever I try to do anything with createMutation or useQueryClient. Anything that tries to leverage the top level queryProvider state I get an error that the client isnt set. 
Uncaught (in promise) Error: No QueryClient set, use QueryClientProvider to set one
Uncaught (in promise) Error: No QueryClient set, use QueryClientProvider to set one
im 99% certain I set it correctly.

Did you find this page helpful?