DASHBOARD_DEALS_CHART_QUERY not working
I'm working on a React application using the Refine framework along with GraphQL. I'm trying to insert mock data into a component using the useList hook. The mock data should be fetched from a GraphQL resource (dealStages) that I learned about in a recent YouTube tutorial.
However, I'm encountering an issue where the data variable remains undefined, and I'm unable to retrieve any data. Below is the relevant part of my code:
import { DASHBOARD_DEALS_CHART_QUERY } from '@/graphql/queries';
import { mapDealsData } from '@/utilities/helpers';
import { Area, AreaConfig } from '@ant-design/plots';
import { useList, HttpError } from "@refinedev/core";
import React from 'react';
const DealsChart = () => {
// Use the useList from refine that enables fetching data from our API:
const { data } = useList({
resource: 'dealStages',
meta: {
gqlQuery: DASHBOARD_DEALS_CHART_QUERY,
},
});
console.log(data);
const config: AreaConfig = {
data: [],
};
const dealData = React.useMemo(() => {
return mapDealsData(data?.data);
}, [data?.data]);
// Rest of the component...
};
And here's the DASHBOARD_DEALS_CHART_QUERY:
export const DASHBOARD_DEALS_CHART_QUERY = gqlquery DashboardDealsChart( $filter: DealStageFilter! $sorting: [DealStageSort!] $paging: OffsetPaging ) { dealStages(filter: $filter, sorting: $sorting, paging: $paging) { nodes { id title dealsAggregate { groupBy { closeDateMonth closeDateYear } sum { value } } } totalCount } };
Issue:
The data variable remains undefined when I log it, which means that my component doesn't receive any data to work with. Questions:
Is there something I'm missing in the way I'm using useList with GraphQL in Refine? Could there be an issue with the GraphQL query, or should I be passing additional parameters to the useList hook? What could be the reason for the data not being fetched properly, and how can I resolve it? If there's any other information that might be helpful, please let me know. Thanks in advance for your assistance!
However, I'm encountering an issue where the data variable remains undefined, and I'm unable to retrieve any data. Below is the relevant part of my code:
import { DASHBOARD_DEALS_CHART_QUERY } from '@/graphql/queries';
import { mapDealsData } from '@/utilities/helpers';
import { Area, AreaConfig } from '@ant-design/plots';
import { useList, HttpError } from "@refinedev/core";
import React from 'react';
const DealsChart = () => {
// Use the useList from refine that enables fetching data from our API:
const { data } = useList({
resource: 'dealStages',
meta: {
gqlQuery: DASHBOARD_DEALS_CHART_QUERY,
},
});
console.log(data);
const config: AreaConfig = {
data: [],
};
const dealData = React.useMemo(() => {
return mapDealsData(data?.data);
}, [data?.data]);
// Rest of the component...
};
And here's the DASHBOARD_DEALS_CHART_QUERY:
export const DASHBOARD_DEALS_CHART_QUERY = gqlquery DashboardDealsChart( $filter: DealStageFilter! $sorting: [DealStageSort!] $paging: OffsetPaging ) { dealStages(filter: $filter, sorting: $sorting, paging: $paging) { nodes { id title dealsAggregate { groupBy { closeDateMonth closeDateYear } sum { value } } } totalCount } };
Issue:
The data variable remains undefined when I log it, which means that my component doesn't receive any data to work with. Questions:
Is there something I'm missing in the way I'm using useList with GraphQL in Refine? Could there be an issue with the GraphQL query, or should I be passing additional parameters to the useList hook? What could be the reason for the data not being fetched properly, and how can I resolve it? If there's any other information that might be helpful, please let me know. Thanks in advance for your assistance!
