Use GQL fragment

maxsalven · Feb 18, 2022 · 9b0ee6e · 9b0ee6e
1 parent 490b975
commit 9b0ee6e
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.2",
+    "@rollup/plugin-graphql": "^1.1.0",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-links": "^6.4.19",
@@ -30,6 +31,7 @@
     "@vitejs/plugin-react": "^1.2.0",
     "@vitest/ui": "latest",
     "babel-loader": "^8.2.3",
+    "graphql": "^16.3.0",
     "jsdom": "^19.0.0",
     "msw": "^0.36.8",
     "msw-storybook-addon": "^1.6.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,9 @@ import fetch from 'cross-fetch'
 import { useQuery } from 'react-query'
 import type { Post } from './types'
 
+import QUERY from "./Query.gql"
+console.log(QUERY)
+
 export function App() {
   const { isLoading, isSuccess, isError, data } = useQuery<Post[]>(
     'posts',

diff --git a/src/Fragment.gql b/src/Fragment.gql
@@ -0,0 +1,3 @@
+fragment CurrentUserFields on User {
+  id
+}
diff --git a/src/Query.gql b/src/Query.gql
@@ -0,0 +1,7 @@
+#import "./Fragment.gql"
+
+query Foo {
+  currentUser {
+    ...CurrentUserFields
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -2,10 +2,11 @@
 
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import graphql from "@rollup/plugin-graphql";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), graphql()],
   test: {
     globals: true,
     environment: 'jsdom',

diff --git a/yarn.lock b/yarn.lock
@@ -1465,7 +1465,15 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
   integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
 
-"@rollup/pluginutils@^4.1.2":
+"@rollup/plugin-graphql@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-graphql/-/plugin-graphql-1.1.0.tgz#492f579816f65bc21ce26394f2f140d95192622d"
+  integrity sha512-X+H6oFlprDlnO3D0UiEytdW97AMphPXO0C7KunS7i/rBXIGQRQVDU5WKTXnBu2tfyYbjCTtfhXMSGI0i885PNg==
+  dependencies:
+    "@rollup/pluginutils" "^4.0.0"
+    graphql-tag "^2.2.2"
+
+"@rollup/pluginutils@^4.0.0", "@rollup/pluginutils@^4.1.2":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.2.tgz#ed5821c15e5e05e32816f5fb9ec607cdf5a75751"
   integrity sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==
@@ -5890,11 +5898,23 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
   integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
 
+graphql-tag@^2.2.2:
+  version "2.12.6"
+  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
+  integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
+  dependencies:
+    tslib "^2.1.0"
+
 graphql@^15.5.1:
   version "15.8.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
   integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==
 
+graphql@^16.3.0:
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.3.0.tgz#a91e24d10babf9e60c706919bb182b53ccdffc05"
+  integrity sha512-xm+ANmA16BzCT5pLjuXySbQVFwH3oJctUVdy81w1sV0vBU0KgDdBGtxQOUd5zqOBk/JayAFeG8Dlmeq74rjm/A==
+
 handlebars@^4.7.7:
   version "4.7.7"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"