refinedev / refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://refine.dev
MIT License
25.92k stars 1.96k forks source link

[BUG] graphql-default naming convention in Hasura does not seem to be supported in Refine #6085

Closed henraso closed 3 days ago

henraso commented 3 days ago

Describe the bug

I am having difficulties correctly fetching data from my database using Hasura as the data provider. I am trying to utilize the useList hook to retrieve data, using the following code snippet:

export const DashboardTasksChart: React.FC = () => {
   const { list } = useNavigation();
   const { data, isError, error } = useList<
      GetFieldsFromList<DashboardTasksChartQuery>
    >({
      resource: "task_stages",
      pagination: {
        pageSize: 4,
      },
      sorters: [
        {
          field: "title",
          order: "asc",
        },
      ],
      filters: [
        {
          field: "id",
          operator: "eq",
          value: 1,
        },
      ],
      meta: { 
        gqlQuery: DASHBOARD_TASKS_CHART_QUERY
      },
    });

    if (isError) {
      console.error("Error fetching task chart data", error);
      return null;
      }

...

While using sorters, I get the following error in the console:

Error: expected one of the values ['ASC', 'ASC_NULLS_FIRST', 'ASC_NULLS_LAST', 'DESC', 'DESC_NULLS_FIRST', 'DESC_NULLS_LAST'] for type 'OrderBy', but found 'asc':

If I make 'asc' uppercase, I get the following warning in my IDE:

Type '"DESC"' is not assignable to type '"asc" | "desc"'. Did you mean '"desc"'?

It seems crudSort is hard-coded to only accept lowercase sorters, which Hasura does not accept (using the graphql-default naming convention, released 2022).

If I remove the sorters, and only use the filtering, I get the following error in the console:

Error: variable 'where' is declared as 'taskStages_bool_exp', but used where 'TaskStagesBoolExp' is expected: {"response":{"errors":[{"message":"variable 'where' is declared as 'taskStages_bool_exp', but used where 'TaskStagesBoolExp' is expected","extensions":{"path":"$.selectionSet.taskStages.args.where","code":"validation-failed"}}],"status":200,"headers":{"map":{"content-type":"application/json; charset=utf-8"}}},"request":{"query":"query ($limit: Int, $offset: Int, $where: taskStages_bool_exp) { taskStages (limit: $limit, offset: $offset, where: $where)  taskStages_aggregate (where: $where) { aggregate { count } } }","variables":{"limit":4,"offset":0,"where":{"_and":[{"id":{"_eq":1}}]}}}}

Hasura default uses taskStages_bool_exp, but with the graphql-default naming convention, it expects types as PascalCase, such as: TaskStagesBoolExp, which is defined in my query:

export const DASHBOARD_TASKS_CHART_QUERY = gql`
    query DashboardTasksChart(
        $where: TaskStagesBoolExp
        $order_by: [TaskStagesOrderBy!]
        $limit: Int!
        $offset: Int!
    ) {
        taskStages(where: $where, orderBy: $order_by, limit: $limit, offset: $offset) {
            title
            tasksAggregate {
                aggregate {
                    totalCount: count
                }
            }
        }
    }
`;

Is there any quick-fix to making the naming-convention I have started with, correctly working? Thanks in advance.

Steps To Reproduce

  1. See code snippets in bug description (using the app-crm template with change of dataprovider and my own queries)
  2. Run npm run refine dev
  3. See console outputs
  4. Also IDE warnings regarding CrudSort

Expected behavior

Correctly fetching data from Hasura data provider.

Packages

Additional Context

No response

Edit: updated versions of packages

henraso commented 3 days ago

I did not dive too much into the code before writing, but it seems to be a setting for naming convention when defining dataProvider, as follows:

export const dataProvider = DataProvider(client, { namingConvention: "graphql-default" });

I looked through all the documentation, and did not find anything about it there. Should be added to Hasura Data Provider page.