refactor(website): use variables in graphql mutation

Author: Han2-Ro

astro.config.mjs

@@ -3,6 +3,7 @@ import node from '@astrojs/node';
 import svelte from '@astrojs/svelte';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'astro/config';
+import { JsxEmit } from 'typescript';
 
 const PREVIEW = process.env.PREVIEW_DEPLOYMENT === 'true';
 
@@ -38,7 +39,8 @@ export default defineConfig({
 
   vite: {
     define: {
-      'process.env': process.env,
+      'process.env.TWENTY_AUTH': `${process.env.TWENTY_AUTH}`,
+      'process.env.TWENTY_GRAPHQL_URL': `${process.env.TWENTY_GRAPHQL_URL}`,
     },
     plugins: [tailwindcss()],
   },

src/pages/api/support-us.ts

@@ -2,6 +2,7 @@ export const prerender = false;
 import type { APIRoute } from 'astro';
 
 import { gql, GraphQLClient } from 'graphql-request';
+
 export const POST: APIRoute = async ({ request }) => {
   const requiredFields = [
     'firstName',
@@ -69,31 +70,33 @@ export const POST: APIRoute = async ({ request }) => {
 
     // With the replace method the the quotes from the property keys (from JSON) are removed, because graphql requires them unquoted
     const mutation = gql`
-      mutation {
-        createPerson(data: ${JSON.stringify(personData).replace(/"([^"]+)":/g, '$1:')}) {
+      mutation SupportFromMutation(
+        $personData: PersonCreateInput
+        $fordermitgliedschaftData: FordermitgliedschaftCreateInput
+      ) {
+        createPerson(data: $personData) {
           id
           createdAt
         }
-        createFordermitgliedschaft(
-          data: ${JSON.stringify(fordermitgliedschaftData).replace(/"([^"]+)":/g, '$1:')}
-        ) {
+        createFordermitgliedschaft(data: $fordermitgliedschaftData) {
           id
-          monatlicherForderbeitrag {
-            amountMicros
-            currencyCode
-          }
+          createdAt
         }
       }
     `;
     console.log(mutation);
+    const variables = {
+      fordermitgliedschaftData,
+      personData,
+    };
     //TODO: link the Fordermitgliedschaft with the person
     interface ResponseData {
       createPerson: {
         createdAt: string;
         id: string;
       };
     }
-    const response = await graphQLClient.request<ResponseData>(mutation);
+    const response = await graphQLClient.request<ResponseData>(mutation, variables);
     console.log(response);
   } catch (error) {
     console.error(error);