Add Hydrogen Form component for easier mutations #1070

blittle · 2022-04-12T12:00:05Z

Experimental <Form> component for easier mutations. Example usage:

import {Form, RequestServerComponents, useSession} from '@shopify/hydrogen';

const users = [
  {
    name: 'Abraham Lincoln',
    username: '[email protected]',
    password: 'somepass',
  },
];

const INVALID_USER = 'INVALID_USER';
const INVALID_USERNAME = 'INVALID_USERNAME';
const INVALID_PASSWORD = 'INVALID_PASSWORD';

export default function FormServer({error}) {
  const {user} = useSession();

  if (user)
    return (
      <div className="flex justify-center mt-24">
        <div className="w-full max-w-xs">
          <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 text-center">
            <div className="font-bold text-green-800 ">Welcome {user}!</div>
            <div className="mt-4">
              <Form action="/login" method="POST">
                <input type="hidden" name="action" value="logout" />
                <button type="submit">Log out</button>
              </Form>
            </div>
          </div>
        </div>
      </div>
    );

  return (
    <Form action="/login" method="POST">
      <input type="hidden" name="action" value="login" />
      <div className="flex justify-center mt-24">
        <div className="w-full max-w-xs">
          <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            <div className="mb-4">
              <label
                className="block text-gray-700 text-sm font-bold mb-2"
                htmlFor="username"
              >
                Username
              </label>
              <input
                className={`shadow appearance-none border ${
                  error === INVALID_USERNAME || error === INVALID_USER
                    ? 'border-red-500'
                    : ''
                } rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
                id="username"
                name="username"
                type="text"
                placeholder="Username"
              />
            </div>
            <div className="mb-6">
              <label
                className="block text-gray-700 text-sm font-bold mb-2"
                htmlFor="password"
              >
                Password
              </label>
              <input
                className={`shadow appearance-none border ${
                  error === INVALID_PASSWORD || error === INVALID_USER
                    ? 'border-red-500'
                    : ''
                } rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline`}
                id="password"
                name="password"
                type="password"
                placeholder="******************"
              />
              <ErrorMessage error={error} />
            </div>
            <div className="flex items-center justify-between">
              <button
                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                type="submit"
              >
                Sign In
              </button>
            </div>
          </div>
          <p className="text-center text-gray-500 text-xs">
            &copy;2020 Acme Corp. All rights reserved.
          </p>
        </div>
      </div>
    </Form>
  );
}

function ErrorMessage({error}) {
  if (!error) return;

  return (
    <p className="text-red-500 text-xs italic">
      {error === 'INVALID_USERNAME'
        ? 'Please choose a username'
        : error === 'INVALID_PASSWORD'
        ? 'Please choose a password'
        : 'Invalid username or password'}
    </p>
  );
}

export async function api(request, {session}) {
  const data = await request.formData();
  const action = data.get('action');

  if (action === 'logout') {
    await session.destroy();
    return new RequestServerComponents();
  }

  const username = data.get('username');
  const password = data.get('password');

  // Note, you can throw or return a vanilla `Request` or `Response` object.
  // RequestServerComponents is just syntactic sugar, the user could manually create a
  // Response object instead.
  if (!username)
    throw new RequestServerComponents('/login', {error: INVALID_USERNAME});
  if (!password)
    throw new RequestServerComponents('/login', {error: INVALID_PASSWORD});

  const user = users.find(
    (user) => username === user.username && user.password === password,
  );

  if (!user) {
    throw new RequestServerComponents('/login', {error: INVALID_USER});
  }

  await session.set('user', user.username);

  return new RequestServerComponents();
}

blittle · 2022-04-12T12:01:08Z

I'm pretty sure to handle forms properly, this will need Shopify/hydrogen#1067

I'll test with and without node 16 and undici. If it works, I'll change the upstream branch to be v1.x.

blittle · 2022-04-12T13:06:01Z

packages/hydrogen/src/foundation/Form/Form.client.tsx

+            method,
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded',
+              'Hydrogen-Client': 'Form-Action',


Unsure about this header name

blittle · 2022-04-12T13:29:16Z

packages/hydrogen/src/entry-server.tsx

+          if (!Array.from((apiResponse.headers as any).keys()).length) {
+            request.headers.forEach((value, key) => {
+              apiResponse.headers.set(key, value);
+            });
+          }


If the dev doesn't explicitly define headers, then use the headers on the original request.

blittle · 2022-04-12T13:30:12Z

packages/hydrogen/src/entry-server.tsx

+                  `?state=${encodeURIComponent(
+                    JSON.stringify({
+                      pathname: newUrl.pathname,
+                      search: '',


Probably should put the search parameters on?

I thin it's better with the search as empty string, yes. Recently we had issues with prefetching because of this (#1059).
Or do you mean passing search parameters from newUrl?

michenly · 2022-04-12T17:01:12Z

packages/hydrogen/src/utilities/apiRoutes.ts

-        headers,
+        headers: {
+          'X-Shopify-Storefront-Access-Token': storefrontToken,
+          'Accept-Language': (locale as string) ?? defaultLocale,


we should no longer use this header. Sorry I should had remove this as part of Shopify/hydrogen#1028

michenly · 2022-04-12T20:34:43Z

packages/hydrogen/src/foundation/Form/Form.client.tsx

@@ -0,0 +1,57 @@
+import React, {useCallback, useRef} from 'react';
+// @ts-ignore
+import {createFromFetch} from '@shopify/hydrogen/vendor/react-server-dom-vite';


nice trick!

Actually, perhaps we could re-export this from rsc.ts to centralize where we use the vendor dir?

michenly · 2022-04-12T20:40:15Z

examples/template-hydrogen-default/src/routes/form.server.jsx

+    <Form action="/form" method="POST">
+      <b>Count: {count}</b>
+      <button type="submit">Increment</button>
+    </Form>


can you show an example on how to response to the submitted form?
ie. show different alert message base on if the submission is success or failure.

@michenly updated

frandiox · 2022-04-13T09:57:51Z

packages/hydrogen/src/entry-client.tsx

+  useEffect(() => {
+    setApiResponse(null);
+  }, [serverState]);


This will clear the API response if we continue navigating by changing serverState, right?
Maybe we could add some comments around this area for those who are not very familiar with RSC.

frandiox · 2022-04-13T09:59:56Z

packages/hydrogen/src/entry-client.tsx

      setServerState={setServerState}
+      setApiResponse={setApiResponse}


Will we need a more generic setResponse at some point? Or do we think we only want to "overwrite" server state with responses from API? 🤔

frandiox · 2022-04-13T10:07:06Z

packages/hydrogen/src/entry-server.tsx

+            // JavaScript is disabled on the client, handle the response without streaming
+            return handleRequest(apiResponse, {
+              ...options,
+              streamableResponse: undefined,
+            });


Interesting, but wouldn't this also disable streaming for raw HTML forms? I guess it's a minor drawback.

Also, I don't think streamableResponse: undefined works in Node. Currently we are writing to this response in the Node branch. We would need a new parameter like doStream: boolean or anything like that.

Edit: it actually works but only when using our custom hydrogenMiddleware. Our current render function is kind of weird, it always returns a Response even in Node, so it needs to be transformed later to response.write 🙈 -- perhaps we should always do this once we only support Node 16+...

frandiox · 2022-04-13T10:10:13Z

packages/hydrogen/src/entry-server.tsx

-        return apiResponse instanceof Request
-          ? handleRequest(apiResponse, options)
-          : apiResponse;
+        if (apiResponse instanceof Request) {


Can we move most of this logic to renderApiRoute itself? If await route.resource returns a Request, we can set headers and change RSC url within renderApiRoute. Or move it to a different function if you prefer but at least make the logic in the handleRequest a bit easier to scan 🤔

package.json

…ests

blittle force-pushed the jl-node-16 branch from ffc6832 to 52d9e7d Compare April 12, 2022 12:23

blittle force-pushed the bl-form branch from 2d11647 to 08db9ec Compare April 12, 2022 13:04

blittle commented Apr 12, 2022

View reviewed changes

michenly reviewed Apr 12, 2022

View reviewed changes

frandiox reviewed Apr 13, 2022

View reviewed changes

blittle force-pushed the jl-node-16 branch 2 times, most recently from e015f1e to 9832f3a Compare April 18, 2022 15:11

blittle force-pushed the bl-form branch 4 times, most recently from d02aab9 to a6a4966 Compare April 25, 2022 15:56

blittle force-pushed the jl-node-16 branch from 44518a8 to 276876e Compare April 25, 2022 15:57

michenly reviewed Apr 25, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

blittle force-pushed the jl-node-16 branch from 276876e to 8bc2ad9 Compare May 2, 2022 17:14

blittle mentioned this pull request May 5, 2022

Move country to session #1053

Merged

blittle force-pushed the jl-node-16 branch from bbf0929 to 7f6c10e Compare May 11, 2022 15:14

jplhomer and others added 6 commits May 11, 2022 11:16

Switch to min Node v16.13, and use undici and native streams

3f975fa

Fix tests

13f4e6d

Add Hydrogen Form component for easier mutations

7a71c38

Switch to Request

486033c

Add a new RSCRequest class for passing state to concatenated RSC requ…

7411ca8

…ests

Cleanup

777d134

blittle added 6 commits May 11, 2022 11:23

Implement some new stuff

ce9701e

Change name

0acef25

Fix issues with merge

4cd9eff

Add client side stuff

a686804

Cleanup

915ef82

Remove debugger

ef82d2f

blittle force-pushed the bl-form branch from 8e17cae to ef82d2f Compare May 11, 2022 19:39

github-actions bot deployed to preview May 11, 2022 19:41 View deployment

benjaminsehl mentioned this pull request Jun 8, 2022

Improved ergonomics for co-located page & API routes. #1495

Open

blittle mentioned this pull request Jun 10, 2022

[Demo Store Neue] Create Drawer UI component #1503

Merged

blittle closed this Jun 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Hydrogen Form component for easier mutations #1070

Add Hydrogen Form component for easier mutations #1070

blittle commented Apr 12, 2022 •

edited

Loading

blittle commented Apr 12, 2022

blittle Apr 12, 2022

blittle Apr 12, 2022

blittle Apr 12, 2022

frandiox Apr 13, 2022 •

edited

Loading

michenly Apr 12, 2022

michenly Apr 12, 2022

frandiox Apr 13, 2022

michenly Apr 12, 2022

blittle Apr 18, 2022

frandiox Apr 13, 2022

frandiox Apr 13, 2022

frandiox Apr 13, 2022 •

edited

Loading

frandiox Apr 13, 2022

		setServerState={setServerState}
		setApiResponse={setApiResponse}

Add Hydrogen Form component for easier mutations #1070

Add Hydrogen Form component for easier mutations #1070

Conversation

blittle commented Apr 12, 2022 • edited Loading

blittle commented Apr 12, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox Apr 13, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox Apr 13, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blittle commented Apr 12, 2022 •

edited

Loading

frandiox Apr 13, 2022 •

edited

Loading

frandiox Apr 13, 2022 •

edited

Loading