Add mutations to Recipes GraphQL server

packages/gatsby-admin/src/pages/index.tsx

@@ -1,7 +1,82 @@
 import React from "react"
-import { useQuery } from "urql"
+import { useQuery, useMutation } from "urql"
 
-export default (): React.ReactElement => {
+const InstallInput: React.FC<{}> = () => {
+  const [value, setValue] = React.useState(``)
+
+  const [, installGatbyPlugin] = useMutation(`
+    mutation installGatsbyPlugin($name: String!) {
+      createNpmPackage(npmPackage: {
+        name: $name,
+        dependencyType: "production"
+      }) {
+        id
+        name
+      }
+      createGatsbyPlugin(gatsbyPlugin: {
+        name: $name
+      }) {
+        id
+        name
+      }
+    }
+  `)
+
+  return (
+    <form
+      onSubmit={(evt): void => {
+        evt.preventDefault()
+        installGatbyPlugin({
+          name: value,
+        })
+      }}
+    >
+      <label>
+        Install:
+        <input
+          value={value}
+          onChange={(evt): void => setValue(evt.target.value)}
+          type="text"
+          placeholder="gatsby-plugin-cool"
+        />
+      </label>
+    </form>
+  )
+}
+
+const DestroyButton: React.FC<{ name: string }> = ({ name }) => {
+  const [, deleteGatsbyPlugin] = useMutation(`
+    mutation destroyGatsbyPlugin($name: String!) {
+      destroyNpmPackage(npmPackage: {
+        name: $name,
+        id: $name,
+        dependencyType: "production"
+      }) {
+        id
+        name
+      }
+      destroyGatsbyPlugin(gatsbyPlugin: {
+        name: $name,
+        id: $name
+      }) {
+        id
+        name
+      }
+    }
+  `)
+
+  return (
+    <button
+      onClick={(): void => {
+        deleteGatsbyPlugin({ name })
+      }}
+    >
+      X
+    </button>
+  )
+}
+
+const Index: React.FC<{}> = () => {
   const [{ data, fetching, error }] = useQuery({
     query: `
       {
@@ -33,17 +108,22 @@ export default (): React.ReactElement => {
         {data.allGatsbyPlugin.nodes
           .filter(plugin => plugin.name.indexOf(`gatsby-plugin`) === 0)
           .map(plugin => (
-            <li key={plugin.id}>{plugin.name}</li>
+            <li key={plugin.id}>
+              {plugin.name} <DestroyButton name={plugin.name} />
+            </li>
           ))}
       </ul>
+      <InstallInput />
       <h2>Themes</h2>
       <ul>
         {data.allGatsbyPlugin.nodes
           .filter(plugin => plugin.name.indexOf(`gatsby-theme`) === 0)
           .map(plugin => (
             <li key={plugin.id}>
               <details>
-                <summary>{plugin.name}</summary>
+                <summary>
+                  {plugin.name} <DestroyButton name={plugin.name} />
+                </summary>
                 <ul>
                   {plugin.shadowedFiles.map(file => (
                     <li key={file} style={{ opacity: 0.6 }}>
@@ -58,6 +138,10 @@ export default (): React.ReactElement => {
             </li>
           ))}
       </ul>
+
+      <InstallInput />
     </>
   )
 }
+
+export default Index

packages/gatsby-recipes/package.json

@@ -33,6 +33,7 @@
     "gatsby-telemetry": "^1.2.5",
     "glob": "^7.1.6",
     "graphql": "^14.6.0",
+    "graphql-compose": "^6.3.8",
     "graphql-subscriptions": "^1.1.0",
     "graphql-type-json": "^0.3.1",
     "html-tag-names": "^1.1.5",

packages/gatsby-recipes/src/create-types.js

@@ -70,37 +70,52 @@ module.exports = () => {
       }
 
       // Destroy mutation
+      const camelCasedResourceName = _.camelCase(resourceName)
+      const inputType = ObjectTypeComposer.create(
+        type,
+        schemaComposer
+      ).getInputType()
+
       const destroyMutation = {
         type,
         args: {
-          id: { type: GraphQLString },
+          [camelCasedResourceName]: { type: inputType },
         },
         resolve: async (_root, args, context) => {
-          const value = await resource.destroy(context, args)
+          const value = await resource.destroy(
+            context,
+            args[camelCasedResourceName]
+          )
           return { ...value, _typeName: resourceName }
         },
       }
 
       mutationTypes[`destroy${resourceName}`] = destroyMutation
 
       // Create mutation
-      const inputType = ObjectTypeComposer.create(
-        type,
-        schemaComposer
-      ).getInputType()
-
-      const createMutationArgName = _.camelCase(resourceName)
       const createMutation = {
         type,
         args: {
-          [createMutationArgName]: { type: inputType },
+          [camelCasedResourceName]: { type: inputType },
         },
         resolve: (_root, args, context) =>
-          resource.create(context, args[createMutationArgName]),
+          resource.create(context, args[camelCasedResourceName]),
       }
 
       mutationTypes[`create${resourceName}`] = createMutation
 
+      // Update mutation
+      const updateMutation = {
+        type,
+        args: {
+          [camelCasedResourceName]: { type: inputType },
+        },
+        resolve: (_root, args, context) =>
+          resource.update(context, args[camelCasedResourceName]),
+      }
+
+      mutationTypes[`update${resourceName}`] = updateMutation
+
       return {
         query: queryTypes,
         mutation: mutationTypes,
@@ -125,8 +140,6 @@ module.exports = () => {
     return acc
   }, {})
 
-  console.log(mutationTypes)
-
   return {
     queryTypes,
     mutationTypes,