feat(graphql): rewrite GraphQL data provider

.changeset/hot-hats-repair.md

@@ -0,0 +1,10 @@
+---
+"@refinedev/graphql": major
+---
+
+feat: add default options that can be overriden piece by piece.
+
+drop support for usage with `meta.fields`.
+
+[Resolves #5942](https://github.com/refinedev/refine/issues/5942)
+[Resolves #5943](https://github.com/refinedev/refine/issues/5943)

.syncpackrc

@@ -24,7 +24,7 @@
     {
       "dependencies": ["nock"],
       "dependencyTypes": ["dev"],
-      "packages": ["@refinedev/appwrite"],
+      "packages": ["@refinedev/appwrite", "@refinedev/graphql"],
       "isIgnored": true
     }
   ]

documentation/blog/2024-03-22-useeffect-cleanup.md

@@ -50,7 +50,7 @@ This is where the `useEffect` cleaning function comes in. In the cleanup functio
 
 ## When to use the `useEffect` cleanup function
 
-There are various scenarios which will prompt the use of the `useEffect` cleanup function. They are as follows: 
+There are various scenarios which will prompt the use of the `useEffect` cleanup function. They are as follows:
 
 ### Fetch requests
 

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,
+  defaultGetDataFn,
+} 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 defaultGetDataFn({ 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/appwrite/package.json

@@ -48,7 +48,7 @@
     "@types/jest": "^29.2.4",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "nock": "14.0.0-beta.8",
+    "nock": "14.0.0-beta.14",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "tsup": "^6.7.0",

packages/graphql/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
   rootDir: "./",
   displayName: "graphql",
   setupFilesAfterEnv: ["<rootDir>/test/jest.setup.ts"],
-  testEnvironment: "jsdom",
+  testEnvironment: "node",
   moduleNameMapper: {
     "^(..?/.+).js?$": "$1",
   },

packages/graphql/package.json

@@ -40,32 +40,30 @@
     "types": "node ../shared/generate-declarations.js"
   },
   "dependencies": {
+    "@urql/core": "^5.0.6",
     "camelcase": "^6.2.0",
-    "gql-query-builder": "^3.5.5",
     "graphql": "^15.6.1",
-    "graphql-request": "^5.2.0",
-    "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.9.1",
+    "lodash": "^4.17.21",
     "pluralize": "^8.0.0"
   },
   "devDependencies": {
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@refinedev/cli": "^2.16.33",
     "@refinedev/core": "^4.52.0",
     "@types/jest": "^29.2.4",
+    "@types/lodash": "^4.14.171",
     "@types/pluralize": "^0.0.29",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "nock": "^13.4.0",
+    "nock": "14.0.0-beta.14",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "tsup": "^6.7.0",
     "typescript": "^5.4.2"
   },
   "peerDependencies": {
-    "@refinedev/core": "^4.46.1",
-    "gql-query-builder": "^3.5.5",
-    "graphql-request": "^5.2.0",
+    "@refinedev/core": "^4.54.1",
     "graphql-ws": "^5.9.1"
   },
   "engines": {

packages/graphql/refine.config.js

@@ -8,8 +8,6 @@ module.exports = {
         label: "GraphQL",
         requiredPackages: [
           "[email protected]",
-          "[email protected]",
-          "[email protected]",
           "[email protected]",
           "[email protected]",
           "[email protected]",
@@ -24,32 +22,28 @@ module.exports = {
             dest: "./providers/graphql/dataProvider/index.ts",
           },
           {
-            src: "./src/liveProvider/index.ts",
-            dest: "./providers/graphql/liveProvider/index.ts",
+            src: "./src/dataProvider/options.ts",
+            dest: "./providers/graphql/dataProvider/options.ts",
           },
           {
-            src: "./src/utils/index.ts",
-            dest: "./providers/graphql/utils/index.ts",
-          },
-          {
-            src: "./src/utils/generateFilter.ts",
-            dest: "./providers/graphql/utils/generateFilter.ts",
+            src: "./src/liveProvider/index.ts",
+            dest: "./providers/graphql/liveProvider/index.ts",
           },
           {
-            src: "./src/utils/generateSort.ts",
-            dest: "./providers/graphql/utils/generateSort.ts",
+            src: "./src/liveProvider/helpers.ts",
+            dest: "./providers/graphql/liveProvider/helpers.ts",
           },
           {
-            src: "./src/utils/generateUseListSubscription.ts",
-            dest: "./providers/graphql/utils/generateUseListSubscription.ts",
+            src: "./src/utils/index.ts",
+            dest: "./providers/graphql/utils/index.ts",
           },
           {
-            src: "./src/utils/generateUseManySubscription.ts",
-            dest: "./providers/graphql/utils/generateUseManySubscription.ts",
+            src: "./src/utils/graphql.ts",
+            dest: "./providers/graphql/utils/graphql.ts",
           },
           {
-            src: "./src/utils/generateUseOneSubscription.ts",
-            dest: "./providers/graphql/utils/generateUseOneSubscription.ts",
+            src: "./src/utils/getListHelpers.ts",
+            dest: "./providers/graphql/utils/getListHelpers.ts",
           },
         ],
         message: `
@@ -58,12 +52,21 @@ module.exports = {
               \`\`\`
               // title: App.tsx
               import dataProvider, { liveProvider } from "providers/graphql";
+              import { Client, fetchExchange } from "@urql/core";
+              import { createClient } from "graphql-ws";
+
+              const API_URL = "https://api.nestjs-query.refine.dev/graphql";
+              const WS_URL = "wss://api.nestjs-query.refine.dev/graphql";
+
+              const client = new Client({ url: API_URL, exchanges: [fetchExchange] });
+
+              const wsClient = createClient({ url: WS_URL })
 
               const App = () => {
                   return (
                       <Refine
-                          dataProvider={dataProvider}
-                          liveProvider={liveProvider}
+                          dataProvider={dataProvider(client)}
+                          liveProvider={liveProvider(wsClient)}
                           /* ... */
                       />
                   );