WPGraphQL for Ninja Forms plugin<\/a>, let\u2019s test that it works by requesting and submitting data to its API:<\/p>\n\n\n\nRequesting form default form data:<\/strong><\/p>\n\n\n``<\/span>`\n{\n\n\u00a0\u00a0form(id: \"1\", idType: DATABASE_ID) {\n\n\u00a0\u00a0\u00a0\u00a0title\n\n\u00a0\u00a0\u00a0\u00a0fields {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fieldId\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n}\n\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nSubmitting data to the form via mutation:<\/strong><\/p>\n\n\n``<\/span>`\nmutation SubmitForm($input: SubmitFormInput!) {\n\n\u00a0\u00a0submitForm(input: $input) {\n\n\u00a0\u00a0\u00a0\u00a0success\n\n\u00a0\u00a0\u00a0\u00a0message\n\n\u00a0\u00a0\u00a0\u00a0errors {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fieldId\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n}\n\n`<\/span>``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nForm Submission in Next.js App Router<\/h2>\n\n\n\n
The next step I took was to create the API route responsible for handling the form submission safely. In App Router, route handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs. We will take advantage of that convention in the app\/api\/contact\/route.ts<\/code> file.<\/p>\n\n\n\nThis file securely bridges a Next.js frontend with a WordPress backend via GraphQL. In the POST<\/code> handler, the code first reads JSON from the incoming request and expects three properties: name<\/code>, email<\/code>, and message<\/code>. If any of these fields is missing, it immediately returns a 400 response with an error. Once validation passes, the handler constructs a WPGraphQL mutation:<\/p>\n\n\nconst<\/span> mutation = `\n\n\u00a0\u00a0mutation SubmitForm($input: SubmitFormInput!) {\n\n\u00a0\u00a0\u00a0\u00a0submitForm(input: $input) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0errors {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fieldId\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0slug\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n`;<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nNext, the code issues a fetch<\/code> call to the WordPress GraphQL endpoint, which is specified via the environment variable NEXT_PUBLIC_GRAPHQL_ENDPOINT<\/code>. In that call, the headers include \"Content-Type\": \"application\/json\"<\/code> and an Authorization header built from another environment variable:<\/p>\n\n\n`Authorization: Bearer ${process.env.WP_AUTH_TOKEN}<\/span>`<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nBecause WP_AUTH_TOKEN<\/code> is pulled from process.env<\/code> , it ensures that only your Next.js app \u2014 holding this secret \u2014 can successfully authorize and submit data to the WordPress endpoint.<\/p>\n\n\n\nThe request body contains the query<\/code> and a variables object whose input<\/code> includes formId: 1<\/code>, an array of field objects mapping each field\u2019s id<\/code> to “value: data.name<\/code>, value: data.email<\/code>, and value: data.message<\/code>, plus a clientMutationId<\/code> set to \"contact-form-submission\"<\/code>.<\/p>\n\n\n\nWhen the response arrives, the code calls await wpResponse.json()<\/code>, then checks both wpResponse.ok<\/code> and response.errors<\/code>. If either indicates a failure, it logs the first GraphQL error to the server console and throws an exception. In the success case, when submitForm<\/code> returns something like { success: true, message: \"\u2026\", errors: [] }<\/code>, the route returns a 200 JSON response:<\/p>\n\n\n{ \"success\"<\/span>: true<\/span>, \"message\"<\/span>: \"Form submitted successfully\"<\/span> }<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\nAny thrown exception or unexpected condition is caught by the catch block, which logs the error and returns a 500 response with { error: \"Form submission failed\" }<\/code>. Finally, the file exports a GET<\/code> handler that always returns a 405 \u201cMethod not allowed\u201d response, ensuring only POST<\/code> requests are processed.<\/p>\n\n\n\nInterfacing With the API Route via Server Actions<\/h2>\n\n\n\n
Now that we have discussed the API route in route.ts<\/code>, let\u2019s go over the server action responsible for interfacing with that API endpoint. The actions.ts<\/code> file implements a server-side action that functions as the middleware between the client-side form submission and the API endpoint.<\/p>\n\n\n\nWhen a user triggers the form submission, the submitForm<\/code> server action is invoked, which processes the form data and initiates an HTTP POST<\/code> request to the \/api\/contact<\/code> endpoint. This endpoint, implemented in route.ts<\/code>, then executes the WordPress WPGraphQL mutation through the Ninja Forms API.<\/p>\n\n\n```\n\"use server\"<\/span>;\n\nexport async function<\/span> submitForm<\/span>(formData: FormData)<\/span> <\/span>{\n\n\u00a0\u00a0const<\/span> name = formData.get(\"name\"<\/span>) as<\/span> string;\n\n\u00a0\u00a0const<\/span> email = formData.get(\"email\"<\/span>) as<\/span> string;\n\n\u00a0\u00a0const<\/span> message = formData.get(\"message\"<\/span>) as<\/span> string;\n\n\u00a0\u00a0const<\/span> imageUrl = formData.get(\"imageUrl\"<\/span>) as<\/span> string | null<\/span>;\n\n\u00a0\u00a0if<\/span> (!name || !email || !message) {\n\n\u00a0\u00a0\u00a0\u00a0return<\/span> { error: \"Please fill in all fields\"<\/span> };\n\n\u00a0\u00a0}\n\n\u00a0\u00a0const<\/span> baseUrl = process.env.NEXT_PUBLIC_SITE_URL || \"http:\/\/localhost:3000\"<\/span>;\n\n\u00a0\u00a0try<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> response = await fetch(`${baseUrl}\/api\/contact`, {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0method: \"POST\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0headers: {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"Content-Type\"<\/span>: \"application\/json\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: JSON.stringify({ name, email, message, imageUrl }),\n\n\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> result = await response.json();\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (!response.ok) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return<\/span> { error: result.error || \"Submission failed\"<\/span> };\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0return<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: \"Thank you for your message! We will get back to you soon.\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0};\n\n\u00a0\u00a0} catch<\/span> (error) {\n\n\u00a0\u00a0\u00a0\u00a0return<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0error: error instanceof<\/span> Error ? error.message : \"Failed to submit form\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0};\n\n\u00a0\u00a0}\n\n}\n\n```<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nNotice that we also read an optional imageUrl<\/code> field from formData<\/code>. If the user has uploaded an image to Cloudinary, we will pass that URL along with name<\/code>, email<\/code>, and message<\/code>. Otherwise, imageUrl<\/code> remains null<\/code>.<\/p>\n\n\n\nRendering the Form on the Client<\/h2>\n\n\n\n
The contact-form.tsx<\/code> file implements a client-side form component that leverages Next.js\u2019s Form API and server actions for handling contact form submissions. The component is marked with the \"use client\"<\/code> directive, indicating that it runs on the client side and utilizes React\u2019s useFormStatus<\/code> hook to manage form submission states. In addition, we\u2019ve added support for optional image uploads to Cloudinary.<\/p>\n\n\n```\n\"use client\"<\/span>;\n\nimport Form from \"next\/form\"<\/span>;\n\nimport { useFormStatus } from \"react-dom\"<\/span>;\n\nimport { submitForm } from \".\/actions\"<\/span>;\n\nimport { useState } from \"react\"<\/span>;\n\nfunction<\/span> SubmitButton<\/span>()<\/span> <\/span>{\n\n\u00a0\u00a0const<\/span> { pending } = useFormStatus();\n\n\u00a0\u00a0return<\/span> (\n\n\u00a0\u00a0\u00a0\u00a0<button\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=\"submit\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0disabled={pending}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0className={`w-full py-3<\/span> px-6<\/span> rounded bg-yellow-500<\/span> text-black font-semibold hover:bg-yellow-400<\/span> transition-colors ${\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pending ? \"opacity-50 cursor-not-allowed\"<\/span> : \"\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}`}\n\n\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{pending ? \"Sending...\"<\/span> : \"Send Message\"<\/span>}\n\n\u00a0\u00a0\u00a0\u00a0<\/button>\n\n\u00a0\u00a0);\n\n}\n\nexport function<\/span> ContactForm<\/span>()<\/span> <\/span>{\n\n\u00a0\u00a0const<\/span> [message, setMessage] = useState<{\n\n\u00a0\u00a0\u00a0\u00a0type: \"success\"<\/span> | \"error\"<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0text: string;\n\n\u00a0\u00a0} | null<\/span>>(null<\/span>);\n\n\u00a0\u00a0const<\/span> [imageUrl, setImageUrl] = useState<string | null<\/span>>(null<\/span>);\n\n\u00a0\u00a0const<\/span> [isUploading, setIsUploading] = useState(false<\/span>);\n\n\u00a0\u00a0async function<\/span> handleImageUpload<\/span>(event: React.ChangeEvent<HTMLInputElement>)<\/span> <\/span>{\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> file = event.target.files?.[0<\/span>];\n\n\u00a0\u00a0\u00a0\u00a0if<\/span> (!file) return<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0setIsUploading(true<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0const<\/span> formData = new<\/span> FormData();\n\n\u00a0\u00a0\u00a0\u00a0formData.append(\"file\"<\/span>, file);\n\n\u00a0\u00a0\u00a0\u00a0try<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> response = await fetch(\"\/api\/upload\"<\/span>, {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0method: \"POST\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: formData,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const<\/span> result = await response.json();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if<\/span> (!response.ok) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0throw<\/span> new<\/span> Error(result.error || \"Upload failed\"<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setImageUrl(result.secure_url);\n\n\u00a0\u00a0\u00a0\u00a0} catch<\/span> (error) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setMessage({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: \"error\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text: error instanceof<\/span> Error ? error.message : \"Failed to upload image\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0} finally<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setIsUploading(false<\/span>);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n\u00a0\u00a0async function<\/span>