✨ feat: Use drupal vite plugin (#166)

Author: enZane

starters/react-router/app/integration/forms/ContactForm/function.server.ts

@@ -1,5 +1,5 @@
 import { graphql } from '~/graphql/gql.tada'
-import { getClient } from '~/utils/client.server'
+import { getDrupalClient } from 'drupal-vite/client'
 import { ContactFormSchema } from './schema'
 import { composable } from 'composable-functions'
 
@@ -17,14 +17,7 @@ const contactMutation = graphql(`
 async function submitContactForm(
   input: ContactFormSchema,
 ) {
-  const client = await getClient({
-    url: process.env.DRUPAL_GRAPHQL_URI as string,
-    auth: {
-      uri: process.env.DRUPAL_AUTH_URI as string,
-      clientId: process.env.DRUPAL_CLIENT_ID as string,
-      clientSecret: process.env.DRUPAL_CLIENT_SECRET as string,
-    },
-  })
+  const client = await getDrupalClient()
 
   const inputArray = Object.entries(input).map(([key, value]) => ({
     key,

starters/react-router/app/routes/$.tsx

@@ -6,14 +6,14 @@ import type { EntityFragmentType } from '~/graphql/types'
 import NodeArticleComponent from '~/integration/node/NodeArticle'
 import NodePageComponent from '~/integration/node/NodePage'
 import TermTagsComponent from '~/integration/taxonomy/TermTags'
-import { getClient } from '~/utils/client.server'
 import { calculatePath } from '~/utils/routes'
 import { calculateMetaTags } from '~/utils/metatags'
 import { Header, Footer } from '~/components/blocks'
 import { NodeArticleFragment, NodePageFragment } from '~/graphql/fragments/node'
 import { TermTagsFragment } from '~/graphql/fragments/terms'
 import { MenuFragment, MenuItemFragment } from '~/graphql/fragments/menu'
 import { redirect } from 'react-router'
+import { getDrupalClient } from 'drupal-vite/client'
 
 export function meta({ data }: Route.MetaArgs) {
   if (!data) {
@@ -55,14 +55,7 @@ export function meta({ data }: Route.MetaArgs) {
 export async function loader({ params, request }: Route.LoaderArgs) {
   const path = calculatePath({ path: params['*'], url: request.url })
 
-  const client = await getClient({
-    url: process.env.DRUPAL_GRAPHQL_URI as string,
-    auth: {
-      uri: process.env.DRUPAL_AUTH_URI as string,
-      clientId: process.env.DRUPAL_CLIENT_ID as string,
-      clientSecret: process.env.DRUPAL_CLIENT_SECRET as string,
-    },
-  })
+  const client = await getDrupalClient()
 
   const nodeRouteQuery = graphql(
     `

starters/react-router/app/utils/auth.server.ts

@@ -0,0 +1,11 @@
+/**
+  This file is optional since we are only using the fetch exchange.
+  Added to the starter to show how to configure exchanges in a Drupal Vite project.
+  You can remove this file if you are not using any other exchanges.
+*/
+import { DrupalDecoupledConfig } from 'drupal-vite'
+import { fetchExchange } from '@urql/core'
+
+export default {
+  exchanges: [fetchExchange],
+} satisfies DrupalDecoupledConfig

starters/react-router/app/utils/client.server.ts

@@ -28,8 +28,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "composable-functions": "^5.0.0",
-    "drupal-auth-client": "^1.0",
     "drupal-decoupled": "^0.2.2",
+    "drupal-vite": "^0.0.2",
     "gql.tada": "^1.8.10",
     "isbot": "^5.1.17",
     "lucide-react": "^0.474.0",

starters/react-router/drupal-decoupled.config.ts

@@ -4,5 +4,6 @@ export default {
   ssr: true,
   future: {
     unstable_viteEnvironmentApi: true,
+    unstable_optimizeDeps: true,
   },
 } satisfies Config

starters/react-router/package.json

@@ -2,8 +2,16 @@ import { reactRouter } from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { drupal } from 'drupal-vite'
 
 const isStorybook = process.argv[1]?.includes('storybook')
 export default defineConfig({
-  plugins: [tailwindcss(), !isStorybook && reactRouter(), tsconfigPaths()],
+  plugins: [
+    tailwindcss(),
+    !isStorybook && reactRouter(),
+    drupal({
+      drupalUrl: 'DRUPAL_AUTH_URI',
+    }),
+    tsconfigPaths(),
+  ],
 })