# Local State Management

## File Structure
This folder contains all the local resolvers that will help you to handle local state management on your components. You can find the following files:

```
local
| index.js // export all resolvers and typedef schema for local apollo graphql instance
|
|__ ContainerFolder
|
|
|____ SubContainerFolder    
|       generated.js // this file generate resolvers based on your schemas
|       mutations.js // all gql strings that will be used to call the resolverscan use.
|       queries.js // all gql strings that will be used to call the resolvers.
|       resolvers.js // all the local resolvers that will be included in the apollo client instance.
|       sdl.js // all the typedefs that need to be added to the schema to declare resolvers(queries, mutations) and typedefs.
```
### How to make a form binded to the local state?
I will use as a example the basic component implementation.
#### Add your typedef
You should update your sdl.js file and add:

`````
type BasicContent {
  id: ID!
  title: String
  programId: String
  locationId: String
  language: String
  organizationId: String
}
`````

#### Generate resolvers that will handle your form
Add to the generated.js file the following code

* See the documentation of generateGQLLocaleStateManagement fn to know what are the paramters.
`````
const basicContent = generateGQLLocaleStateManagement(
  gql`
    query getRecruitmentProcess($id: ID!) {
      getRecruitmentProcess(id: $id) {
        language
        id
        title
        programId
        locationId
        organizationId
      }
    }
  `,
  'BasicContent',
  'id title language locationId programId organizationId',
  data => (data || {}).getRecruitmentProcess || {},
);

export default {
  BASIC_CONTENT: basicContent
}
`````

#### Spread generated code

Be sure to import generated code in mutations.js, queries.js, resolvers.js, sdl.js

This is automatically spread in the RecruitmentProcessPage/ folder so you can see how the files handle this automatic spread.

#### Use queries in your component

Use mutation and query to initialize your form and to suscribe to any change in the form

```````
import Query from 'graphql/local/RecruitmentProcessPage/Settings/queries';
import Mutation from 'graphql/local/RecruitmentProcessPage/Settings/mutations';

const BasicContent = ({ recruitmentInfo }) => {
  ...
  const [updateLocalState] = useMutation(Mutation.SET_BASIC_CONTENT);
  useQuery(Query.GET_BASIC_CONTENT, {
    variables: { id: recruitmentInfo.id },
    onCompleted(extractedData) {
      form.initialize({
        // spread your fields and values from query
      });
    },
  });
  useEffect(() => {
    const unsubscribe = form.subscribe(
      function onFormValuesChange(formData) {
        // Check if the form has been touched by the user and needs to be considered to update local state.
        const needsToUpdateState = Object.keys(formData.visited).reduce(
          (prev, cur) => formData.visited[cur] || prev,
          false,
        );
        if (needsToUpdateState) {
          // call mutation that updates localState
          updateLocalState({
            variables: {
              input: {
                id: recruitmentInfo.id,
                ...formData.values,
              },
            },
          });
        }
      },
      {
        values: true,
        visited: true,
      },
    );
    return function quitBasicInformation() {
      unsubscribe();
    };
  }, []);
  ...
}

```````