feat(graphql): add getData and getCount options

.changeset/hot-hats-repair.md

@@ -0,0 +1,8 @@
+---
+"@refinedev/graphql": minor
+---
+
+feat: add default fetcher function. TBC Later.
+
+[Resolves #5943](https://github.com/refinedev/refine/issues/5943)
+[Resolves #5942](https://github.com/refinedev/refine/issues/5942)

documentation/docs/data/packages/graphql/index.md

@@ -43,6 +43,51 @@ const App = () => (
 );
 ```
 
+### Options
+
+It's also possible to pas a 2nd parameter to GraphQL data provider. These options are `getCount` and `getData`.
+
+You can use them to extract response from your GraphQL response.
+
+Let's say you have the following query:
+
+```graphql
+query PostList($where: JSON, $sort: String) {
+  allPosts(where: $where, sort: $sort) {
+    id
+    title
+    content
+    category {
+      id
+    }
+  }
+}
+```
+
+By default, our data provider expects a plural form of the resource in the response, so if you have `allPosts`, you would need to swizzle GraphQL data provider and customize it yourself. With these options, we help you extract data from your response. So you don't need to create custom data provider for relatively simple cases.
+
+```ts
+import dataProvider, {
+  GraphQLClient,
+  defaultGetDataFunc,
+} from "@refinedev/graphql";
+import camelCase from "camelcase";
+
+const client = new GraphQLClient("https://api.example.com/graphql");
+
+const dp = dataProvider(client, {
+  getData: ({ method, params, response }) => {
+    if (method === "getList") {
+      const key = camelCase(`all-${params.resource}`); // -> allPosts
+
+      return response[key];
+    }
+
+    return defaultGetDataFunc({ method, params, response });
+  },
+});
+```
+
 ## Realtime
 
 `@refinedev/graphql` also provides a `liveProvider` to enable realtime features of Refine. These features are powered by GraphQL subscriptions and uses [`graphql-ws`](https://the-guild.dev/graphql/ws) to handle the connections.

packages/graphql/src/dataProvider/index.ts

@@ -1,4 +1,9 @@
-import type { DataProvider, BaseRecord } from "@refinedev/core";
+import type {
+  DataProvider,
+  BaseRecord,
+  GetListResponse,
+  GetManyResponse,
+} from "@refinedev/core";
 import { GraphQLClient } from "graphql-request";
 import * as gql from "gql-query-builder";
 import pluralize from "pluralize";
@@ -10,10 +15,22 @@ import {
   getOperationFields,
   isMutation,
 } from "../utils";
-
-const dataProvider = (client: GraphQLClient): Required<DataProvider> => {
+import {
+  defaultGetCountFunc,
+  defaultGetDataFunc,
+  type GraphQLDataProviderOptions,
+} from "./options";
+
+const dataProvider = (
+  client: GraphQLClient,
+  options: GraphQLDataProviderOptions = {
+    getCount: defaultGetCountFunc,
+    getData: defaultGetDataFunc,
+  },
+): Required<DataProvider> => {
   return {
-    getList: async ({ resource, pagination, sorters, filters, meta }) => {
+    getList: async (params) => {
+      const { resource, pagination, sorters, filters, meta } = params;
       const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};
 
       const sortBy = generateSort(sorters);
@@ -24,7 +41,7 @@ const dataProvider = (client: GraphQLClient): Required<DataProvider> => {
       const operation = meta?.operation ?? camelResource;
 
       if (meta?.gqlQuery) {
-        const response = await client.request<BaseRecord>(meta.gqlQuery, {
+        const response = await client.request<BaseRecord[]>(meta.gqlQuery, {
           ...meta?.variables,
           sort: sortBy,
           where: filterBy,
@@ -37,8 +54,12 @@ const dataProvider = (client: GraphQLClient): Required<DataProvider> => {
         });
 
         return {
-          data: response[operation],
-          total: response[operation].count,
+          data: options.getData({
+            method: "getList",
+            params,
+            response,
+          }) as BaseRecord[],
+          total: options.getCount({ params, response }),
         };
       }
 
@@ -58,27 +79,30 @@ const dataProvider = (client: GraphQLClient): Required<DataProvider> => {
         fields: meta?.fields,
       });
 
-      const response = await client.request<BaseRecord>(query, variables);
+      const response = await client.request<GetListResponse>(query, variables);
 
       return {
-        data: response[operation],
-        total: response[operation].count,
+        data: options.getData({ method: "getList", params, response }),
+        total: options.getCount({ params, response }),
       };
     },
 
-    getMany: async ({ resource, ids, meta }) => {
+    getMany: async (params) => {
+      const { resource, ids, meta } = params;
+
       const camelResource = camelCase(resource);
 
       const operation = meta?.operation ?? camelResource;
 
       if (meta?.gqlQuery) {
-        const response = await client.request<BaseRecord>(meta.gqlQuery, {
+        const response = await client.request<GetManyResponse>(meta.gqlQuery, {
           where: {
             id_in: ids,
           },
         });
+
         return {
-          data: response[operation],
+          data: options.getData({ method: "getList", params, response }),
         };
       }
 
@@ -96,7 +120,7 @@ const dataProvider = (client: GraphQLClient): Required<DataProvider> => {
       const response = await client.request<BaseRecord>(query, variables);
 
       return {
-        data: response[operation],
+        data: options.getData({ method: "getList", params, response }),
       };
     },
 

packages/graphql/src/dataProvider/options.ts

@@ -0,0 +1,92 @@
+import type {
+  BaseRecord,
+  CreateParams,
+  DeleteOneParams,
+  GetListParams,
+  GetOneParams,
+  UpdateParams,
+} from "@refinedev/core";
+import camelCase from "camelcase";
+import pluralize from "pluralize";
+
+"asd".toUpperCase;
+
+type GraphQLGetDataFunctionParams = { response: Record<string, any> } & (
+  | { method: "getList"; params: GetListParams }
+  | { method: "create"; params: CreateParams }
+  | { method: "update"; params: UpdateParams }
+  | { method: "getOne"; params: GetOneParams }
+  | { method: "deleteOne"; params: DeleteOneParams }
+);
+
+type GraphQLGetDataFunction = (params: GraphQLGetDataFunctionParams) => any;
+
+type GraphQLGetCountFunctionParams = {
+  response: Record<string, any>;
+  params: GetListParams;
+};
+
+type GraphQLGetCountFunction = (
+  params: GraphQLGetCountFunctionParams,
+) => number;
+
+export type GraphQLDataProviderOptions = {
+  getData: GraphQLGetDataFunction;
+  getCount: GraphQLGetCountFunction;
+};
+
+export const defaultGetDataFunc: GraphQLGetDataFunction = ({
+  method,
+  params,
+  response,
+}) => {
+  const singularResource = pluralize.singular(params.resource);
+
+  switch (method) {
+    case "create": {
+      const camelCreateName = camelCase(`create-${singularResource}`);
+      const operation = params.meta?.operation ?? camelCreateName;
+
+      // console.log(response, operation, singularResource);
+
+      return response[operation][singularResource];
+    }
+    case "deleteOne": {
+      const camelDeleteName = camelCase(`delete-${singularResource}`);
+
+      const operation = params.meta?.operation ?? camelDeleteName;
+
+      return response[operation][singularResource];
+    }
+    case "getList": {
+      const camelResource = camelCase(params.resource);
+      const operation = params.meta?.operation ?? camelResource;
+
+      return response[operation] ?? [];
+    }
+    case "getOne": {
+      const camelResource = camelCase(singularResource);
+
+      const operation = params.meta?.operation ?? camelResource;
+
+      return response[operation];
+    }
+    case "update": {
+      const camelUpdateName = camelCase(`update-${singularResource}`);
+      const operation = params.meta?.operation ?? camelUpdateName;
+
+      return response[operation][singularResource];
+    }
+  }
+};
+
+export const defaultGetCountFunc: GraphQLGetCountFunction = ({
+  params,
+  response,
+}): number => {
+  const camelResource = camelCase(params.resource);
+
+  const operation = params.meta?.operation ?? camelResource;
+
+  return response[operation]?.totalCount ?? 0;
+};

packages/graphql/test/getList/index.spec.ts

@@ -5,7 +5,7 @@ import "./index.mock";
 
 describe("getList", () => {
   it("correct response", async () => {
-    const { data } = await dataProvider(client).getList({
+    const { data, total } = await dataProvider(client).getList({
       resource: "posts",
       meta: {
         fields: ["id", "title"],