No QueryClient set, use QueryClientProvider to set one
// Package Imports
import React, { createContext, useContext, useState } from 'react';
// Project Imports
import type ResourceItem from 'interfaces/resource';
import { Permission, Token, TokenContextType } from 'contexts/resource/type';
import { useSimpleList } from '@refinedev/antd';
const TokenContext = createContext<TokenContextType>({
token: undefined,
setToken() {
throw new Error('setToken function is not implemented');
},
crudPermissions: [],
setCrudPermission() {
throw new Error('setCrudPermission function is not implemented');
},
modulePermission: [],
setModulePermission() {
throw new Error('setModulePermission function is not implemented');
},
filteredResources: [],
setFilteredResources() {
throw new Error('setFilteredResources function is not implemented');
},
});
export function useTokenContext() {
return useContext(TokenContext);
}
const TokenProvider = ({ children }: { children: React.ReactNode }) => {
const [token, setToken] = useState<Token>(undefined);
const [crudPermissions, setCrudPermission] = useState<Permission>([]);
const [modulePermission, setModulePermission] = useState<Permission>([]);
const [filteredResources, setFilteredResources] = useState<ResourceItem[]>(
[]
);
const { listProps } = useSimpleList({
resource: 'products',
queryOptions: {
enabled: token && true
}
});
console.log(listProps, 'listProps')
return (
<TokenContext.Provider
value={{
token,
setToken,
crudPermissions,
setCrudPermission,
modulePermission,
setModulePermission,
filteredResources,
setFilteredResources,
}}
>
{children}
</TokenContext.Provider>
);
};
export default TokenProvider;
with this i want to set data from list props into setModulePermissions
23 Replies
Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the provided extracts, it seems like you're trying to use the
useSimpleList
hook from the @refinedev/antd
package outside of a QueryClientProvider. This hook is likely built on top of React Query, which requires a QueryClientProvider to be set in your component tree.
To solve this issue, you need to wrap your application (or at least the part where you're using useSimpleList
) with a QueryClientProvider
from react-query
. Unfortunately, the provided extracts do not contain a direct example of this. However, the general usage would look something like this:
This will provide a QueryClient to your application, allowing you to use hooks like useSimpleList
that depend on React Query.
As for setting data from listProps
into setModulePermissions
, you might want to do something like this inside your TokenProvider
component:
This will update modulePermission
whenever listProps.data
changes. Please adjust this according to your actual data structure and needs.
For more detailed information, you might want to check the official React Query documentation (https://react-query.tanstack.com/overview) or the Refine documentation (https://refine.dev/docs).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•8mo ago
@kapa.ai where to add react-query , using yarn
Let me check the knowledge base for you. One moment! :books:
----------------------
To add
react-query
to your project using yarn, you can run the following command in your terminal:
This command will install react-query
in your project. After installation, you can import it in your project files as shown in the extracts:
You can then use QueryClient
and QueryClientProvider
in your project as per your requirements.
For more details, you can refer to the React Query Guide (https://refine.dev/blog/react-query-guide) on the Refine blog.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•8mo ago
'react-query' should be listed in the project's dependencies. Run 'npm i -S react-query' to add iteslintimport/no-extraneous-dependencies
(alias) class QueryClient
import QueryClient
error @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message you're seeing is from ESLint, a tool for enforcing coding style. It's saying that
react-query
is not listed in your project's dependencies.
To resolve this issue, you need to add react-query
to your project's dependencies. Since you're using npm, you can do this by running the following command in your terminal:
This command will add react-query
to your project's dependencies, which should resolve the ESLint error.
For more information on how to use react-query
in your project, you can refer to the React Query Guide (https://refine.dev/blog/react-query-guide) on the Refine blog.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•8mo ago
@kapa.ai still the same issue
Let me check the knowledge base for you. One moment! :books:
----------------------
If you're still encountering the same issue after installing
react-query
, it could be due to a few reasons:
1. ESLint cache: ESLint might be using a cached version of your project configuration. You can try clearing the cache by running ./node_modules/.bin/eslint --cache --cache-location .eslintcache --fix
in your terminal.
2. Incorrect ESLint configuration: Your ESLint configuration might be incorrectly set up to not recognize react-query
as a valid dependency. You can check your .eslintrc
file (or equivalent) to ensure it's correctly configured.
3. Node Modules not updated: Sometimes, the node_modules
folder might not update correctly after installing a new package. You can try deleting your node_modules
folder and package-lock.json
file (or yarn.lock
if you're using Yarn), and then run npm install
(or yarn install
) again.
If none of these solutions work, it might be helpful to look at the ESLint documentation (https://eslint.org/docs/user-guide/configuring/rules#disabling-rules) or the React Query documentation (https://react-query.tanstack.com/overview) for more information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•8mo ago
no still this issue No QueryClient set, use QueryClientProvider to set one @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message "No QueryClient set, use QueryClientProvider to set one" is indicating that you're trying to use a React Query hook outside of a
QueryClientProvider
.
To resolve this issue, you need to wrap your application (or at least the part where you're using React Query hooks) with a QueryClientProvider
from react-query
.
Here's how you can do it:
This will provide a QueryClient to your application, allowing you to use hooks that depend on React Query.
If you're using Refine, you can pass your custom QueryClient to the Refine component as per the Refine documentation (https://refine.dev/docs/core/refine-component#clientconfig):
This will ensure that Refine uses your custom QueryClient, and you should no longer see the "No QueryClient set" error.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•8mo ago
@kapa.ai I just want to make a simpleList call in context to get data , why to use react query