Does Refine support the graphql-default naming convention in Hasura?

[henraso]

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.

[henraso]

Update:

Adding:

meta: { 
      gqlQuery: DASHBOARD_TASKS_CHART_QUERY
    },

to the useList hook, seems to get rid of the error Error: variable 'where' is declared as 'taskStages_bool_exp', but used where 'TaskStagesBoolExp' is expected: ...

This, on the other hand, causes several other errors, such as:
Error fetching task chart data TypeError: H[c] is undefined
and errors relating to authentication error.

Also:

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

I do believe I have correctly defined Hasura as a graphql data provider, as I have managed to correctly fetch data using the useCustom hook.

[henraso]

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