version 2.0.0

README.md

@@ -22,13 +22,13 @@ This repository manages the three libraries to manage forms by exploiting the po
 
 [See SimpleExample.md](./docs/RelaySimpleExample.md)
 
-## useFormSetValue
+## useFormField
 
-[See useFormSetValue.md](./docs/useFormSetValue.md)
+[See useFormField.md](./docs/useFormSetValue.md)
 
-## useFormSubmit
+## useForm
 
-[See useFormSubmit.md](./docs/useFormSubmit.md)
+[See useForm.md](./docs/useFormSubmit.md)
 
 ## useFormState
 

__tests__/forms.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from 'react';
 import { useCallback } from 'react';
+import { RelayEnvironmentProvider } from 'relay-hooks';
 import {
     Environment,
     Network,
@@ -11,8 +12,7 @@ import {
     RequestParameters,
     Variables,
 } from 'relay-runtime';
-import { RelayEnvironmentProvider } from 'relay-hooks';
-import { useFormSubmit, useFormState, useFormSetValue } from '../src/';
+import { useForm, useFormState, useFormField } from '../src/';
 
 async function fetchQuery(operation: RequestParameters, variables: Variables) {
     const response = await fetch('http://localhost:3000/graphql', {
@@ -62,10 +62,15 @@ export const Form: React.FC<Props> = ({ promise, jestOnSubmit }) => {
 export const HAVE_ERRORS = 'have errors';
 
 export const Errors: React.FC<any> = () => {
-    const { errors, isSubmitting, isValidating } = useFormState();
+    const value = useFormState();
+
+    if (value == null) {
+        return <div />;
+    }
+    const { errors, isSubmitting, isValidating } = value;
     return (
         <>
-            <div data-testid={'errors'}>{errors.length !== 0 ? HAVE_ERRORS : ''}</div>;
+            <div data-testid={'errors'}>{errors && errors.length !== 0 ? HAVE_ERRORS : ''}</div>;
             <div data-testid={'isSubmitting'}>{'' + isSubmitting}</div>;
             <div data-testid={'isValidating'}>{'' + isValidating}</div>;
         </>
@@ -100,7 +105,7 @@ export const validateFirstName = jest.fn(validatePromiseField);
 //export const validateLastName = jest.fn(validateField);
 
 export const FormInternal: React.FC<any> = ({ onSubmit }) => {
-    const data = useFormSubmit({ onSubmit });
+    const data = useForm({ onSubmit });
     return (
         <form onSubmit={data.submit} action="#">
             <div>
@@ -139,7 +144,7 @@ export const Field: React.FC<any> = ({ placeholder, fieldKey, validate }) => {
         [fieldKey, validate],
     );
 
-    const [{ error, value }, setValue] = useFormSetValue({
+    const [{ error, value }, setValue] = useFormField({
         key: fieldKey,
         validate: validate ? validateCallback : undefined,
         initialValue: 1,
@@ -151,7 +156,7 @@ export const Field: React.FC<any> = ({ placeholder, fieldKey, validate }) => {
             if (fieldKey === 'complex') {
                 setValue({
                     test: value,
-                });
+                } as any);
             } else {
                 setValue(value);
             }
@@ -161,7 +166,7 @@ export const Field: React.FC<any> = ({ placeholder, fieldKey, validate }) => {
     ref.current += 1;
     return (
         <>
-            {error && <div data-testid={fieldKey + '-error'}>{error}</div>}
+            {error && <div data-testid={fieldKey + '-error'}>{error as any}</div>}
             <input
                 data-testid={fieldKey}
                 type="text"

docs/useFormSetValue.md

@@ -1,6 +1,6 @@
 ---
 id: use-form-set-value
-title: useFormSetValue
+title: useFormField
 ---
 
 This hook allows you to define new fields that will be used in the validation and submit phase
@@ -56,7 +56,7 @@ const validate = (value: string) => {
 
 export const Field: React.FC<any> = ({ placeholder, fieldKey }) => {
 
-    const [{ error, value }, setValue] = useFormSetValue({
+    const [{ error, value }, setValue] = useFormField({
         key: fieldKey,
         validate,
         initialValue: "try",

docs/useFormSubmit.md

@@ -1,6 +1,6 @@
 ---
 id: use-form-submit
-title: useFormSubmit
+title: useForm
 ---
 
 This hook allows you to define new fields that will be used in the validation and submit phase
@@ -36,7 +36,7 @@ export type FormSubmitReturn = {
 
 ```tsx
 export const FormInternal: React.FC<any> = () => {
-const { submit, validate, reset } = useFormSubmit({ onSubmit: (values) => console.log("values", values)});
+const { submit, validate, reset } = useForm({ onSubmit: (values) => console.log("values", values)});
 
     return (
         <form onSubmit={submit} action="#">

examples/form/package.json

@@ -4,10 +4,10 @@
   "private": true,
   "dependencies": {
     "react-relay-forms": "^1.1.1",
-    "relay-forms": "1.1.1",
+    "relay-forms": "file:../../relay-forms-2.0.0-a1.tgz",
     "relay-forms-nodeps": "^1.1.1",
     "react-relay": "14.1.0",
-    "relay-hooks": "7.2.0",
+    "relay-hooks": "8.0.0",
     "relay-runtime": "^14.1.0",
     "react-dropzone": "11.0.1",
     "@emotion/react": "^11.7.1",

examples/form/src/AppRelayForms.tsx

@@ -16,6 +16,11 @@ const App = () => {
     );
 };
 
-export { useFormSetValue, useFormSubmit, useFormState, useFormValue } from 'relay-forms';
+export {
+    useFormField as useFormSetValue,
+    useForm as useFormSubmit,
+    useFormState,
+    useFormValue,
+} from 'relay-forms';
 
 export default App;

examples/form/src/Form.tsx

@@ -72,6 +72,7 @@ export const FormInternal: React.FC<any> = ({ onSubmit }) => {
             autoComplete="off"
             sx={{ mt: 1, paddingTop: '15px' }}
         >
+            <FormState data={data} />
             <InputField validate={required} fieldKey="firstName" placeholder="First name" />
             <InputField validate={validateMinFive} fieldKey="lastName" placeholder="Last name" />
             <SelectField width={155} placeholder="Gender" validate={required} fieldKey="gender">

examples/form/src/FormState.tsx

@@ -37,7 +37,8 @@ function LinearProgressWithButton(props: any) {
 }
 
 export const FormState: React.FC<any> = ({ data }) => {
-    const { errors, isSubmitting, isValidating } = useFormState();
+    const state = useFormState();
+    const { errors, isSubmitting, isValidating } = state || {};
     const liErrors = errors ? (
         (errors as any[]).map((error) => (
             <Alert key={'alert' + error.key} severity="error">

examples/form/yarn.lock

@@ -1766,12 +1766,12 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
-"@restart/hooks@^0.3.1":
-  version "0.3.27"
-  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.27.tgz#91f356d66d4699a8cd8b3d008402708b6a9dc505"
-  integrity sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==
+"@restart/hooks@^0.4.9":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.11.tgz#8876ccce1d4ad2a4b793a31689d63df36cf56088"
+  integrity sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==
   dependencies:
-    dequal "^2.0.2"
+    dequal "^2.0.3"
 
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
@@ -3773,7 +3773,7 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
-dequal@^2.0.2:
+dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -4552,7 +4552,7 @@ fbjs-css-vars@^1.0.0:
   resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
   integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
 
-fbjs@^3.0.0, fbjs@^3.0.2:
+fbjs@^3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.4.tgz#e1871c6bd3083bac71ff2da868ad5067d37716c6"
   integrity sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ==
@@ -7967,18 +7967,17 @@ relay-forms-nodeps@^1.1.1:
   resolved "https://registry.yarnpkg.com/relay-forms-nodeps/-/relay-forms-nodeps-1.1.1.tgz#39072c0ed077746c73a7c03d129125b45df93142"
   integrity sha512-5SOME+8Yfor+RwjNNEKAY2cAcYtYKx12aw4gE1HoYkdBqDKJ8dm8Bcl7XNQiQ4V5Vg6MQQqIquaxfau09/ODDg==
 
-relay-forms@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/relay-forms/-/relay-forms-1.1.1.tgz#4b8f8f2835a2ca2a9bfade000d98ae3ffe6fc6be"
-  integrity sha512-omyh5GMYis5mlVgSTCneIJkwbjy1UUANacrdutmQHBzbMIjKVentJxgCZDEeNA8KI8Bnx0SpuYUa0ja1P5JwtQ==
+"relay-forms@file:../../relay-forms-2.0.0-a1.tgz":
+  version "2.0.0-a1"
+  resolved "file:../../relay-forms-2.0.0-a1.tgz#7e0b086dd780f3ad94412cb974e478af266257db"
 
-relay-hooks@7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-7.2.0.tgz#0641929ce456a7be1d719e1e2f959b4b1c3611bb"
-  integrity sha512-5yBnAtjnxTPXArITn8oCqBqAIkYm06KykNWRY8cJCWFoBqBWbA2ygZ5AfOcsgNZk3cg1cEXxRzqj68vbDrr9TQ==
+relay-hooks@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/relay-hooks/-/relay-hooks-8.0.0.tgz#06758db91d6c9e4f7623352c542b5a5dfc3c0a96"
+  integrity sha512-fvTzmSt8cxwsAQWCbE/ubXLqNeJq3kMVpvXI2HKYq8bylT1jhSUkEjBVO1N+P0lDTyVxw4be+HZPIR9v8XnKYA==
   dependencies:
-    "@restart/hooks" "^0.3.1"
-    fbjs "^3.0.0"
+    "@restart/hooks" "^0.4.9"
+    fbjs "^3.0.2"
 
 relay-runtime@14.1.0, relay-runtime@^14.1.0:
   version "14.1.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "relay-forms",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "keywords": [
     "forms",
     "relay",
@@ -52,8 +52,8 @@
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17 || ^18",
-    "relay-runtime": "^13.0.2 || ^14.0.0",
-    "relay-hooks": "^7.2.0"
+    "relay-runtime": "^13.0.2 || ^14.0.0 || ^15.0.0",
+    "relay-hooks": "^7.2.0 || ^8.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",

src/index.ts

@@ -1,6 +1,6 @@
 export { useFormState } from './useFormState';
-export { useFormSubmit } from './useFormSubmit';
-export { useFormSetValue } from './useFormSetValue';
+export { useForm } from './useForm';
+export { useFormField } from './useFormField';
 export { useFormValue } from './useFormValue';
 
 export * from './RelayFormsTypes';

src/relay/queryErrorsFieldQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<ee7ef7f29bb623892b97d24679b5ea49>>
+ * @generated SignedSource<<5a0e2c9c0f979fb24973c3cb36a508ca>>
  * @relayHash 1e729a4dd469bbcedf1c07919286ff70
  * @lightSyntaxTransform
  * @nogrep
@@ -131,7 +131,7 @@ return {
     "selections": (v0/*: any*/)
   },
   "params": {
-    "id": "1e729a4dd469bbcedf1c07919286ff70",
+    "id": "1e729a4dd469bbcedf1c07919286ff70\r",
     "metadata": {},
     "name": "queryErrorsFieldQuery",
     "operationKind": "query",

src/relay/queryFieldQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<ef1f2206a47b44bb3fa3b21c43635794>>
+ * @generated SignedSource<<b7f8b9e989d2a24db8e7f1769edd641b>>
  * @relayHash 0b493a6f66e132f2693f91a5da941414
  * @lightSyntaxTransform
  * @nogrep
@@ -107,7 +107,7 @@ return {
     "selections": (v0/*: any*/)
   },
   "params": {
-    "id": "0b493a6f66e132f2693f91a5da941414",
+    "id": "0b493a6f66e132f2693f91a5da941414\r",
     "metadata": {},
     "name": "queryFieldQuery",
     "operationKind": "query",

src/useFormSubmit.tsx → src/useForm.tsx

@@ -3,7 +3,7 @@ import { useRelayEnvironment } from 'relay-hooks';
 import { Snapshot, isPromise, IEnvironment } from 'relay-runtime';
 import { queryFieldQuery$data } from './relay/queryFieldQuery.graphql';
 import { FormSubmitOptions, FormSubmitReturn } from './RelayFormsTypes';
-import { isDone, RESET, TOBEVALIDATE, VALIDATING } from './useFormSetValue';
+import { isDone, RESET, TOBEVALIDATE, VALIDATING } from './useFormField';
 import { operationQueryForm, commit } from './Utils';
 
 function logicSubmit(
@@ -122,7 +122,7 @@ function logicSubmit(
     };
 }
 
-export const useFormSubmit = <ValueType extends object = object>({
+export const useForm = <ValueType extends object = object>({
     onSubmit,
 }: FormSubmitOptions<ValueType>): FormSubmitReturn => {
     const environment = useRelayEnvironment();

src/useFormSetValue.tsx → src/useFormField.tsx

@@ -189,7 +189,7 @@ function logicSetValue<ValueType>(params: LogicParams<ValueType>): LogicReturn<V
     };
 }
 
-export function useFormSetValue<ValueType>({
+export function useFormField<ValueType>({
     key,
     initialValue,
     validate,

src/useFormState.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { useRelayEnvironment } from 'relay-hooks';
+import { Snapshot } from 'relay-runtime';
 import { queryErrorsFieldQuery$data } from './relay/queryErrorsFieldQuery.graphql';
 import { operationQueryErrorsForm } from './Utils';
 
 export const useFormState = (): queryErrorsFieldQuery$data['form'] | null => {
     const environment = useRelayEnvironment();
 
-    const snapshot = React.useMemo(() => {
-        return environment.lookup(operationQueryErrorsForm.fragment);
+    const snapshot: Snapshot = React.useMemo(() => {
+        const s: any = environment.lookup(operationQueryErrorsForm.fragment);
+        s.seenRecords.add('local:form');
+        return s;
     }, [environment]);
 
     const [data, setData] = React.useState((snapshot.data as queryErrorsFieldQuery$data).form);