Introduce standard state management

[jasonbahl]

As a developer that wants to extend the WPGraphQL IDE with my own extensions, I would like to be able to use state from other parts of the application.

As a maintainer of WPGraphQL IDE I would like to have patterns established for managing state that can be:

• tested
• repeated
• documented

---

Proposal

I propose that we adopt a standard mechanism for state management.

Some candidates include:

• XState
• MobX State Tree
• WordPress/data (redux)
• others?

I would recommend leaning into @wordpress/data and the Redux patterns.

Ideally this will solve the maintenance burden of having an established pattern for handling state and will also solve the problem of giving extension authors a way to "use" state from other parts of the application.

---

Use Cases

As an extension developer, I would like to be able to "filter" the IDE to add a button to the "GraphiQL Toolbar" that allows me to execute queries as an authenticated user or a public user.

In order to do this, I would need to:

• be able to "filter" the toolbar Buttons to add my own Button to render in the toolbar
• be able to access the state of the application within my Button to determine things like:
  • is the IDE in an authenticated state or non-autenticated state?
  • who is the current user (if authenticated)
  • set the state to authenticated or public when the button is clicked

This state that the button needs to be aware of is not local to the button, but useful to other components in the application and we need a way to standardize how the state can be used / set from anywhere in the application.

---

Example

This is a (pseudo) example of a Redux store using @wordpress/data:

import { registerStore } from '@wordpress/data';

const reducer = (state = { currentUser: null }, action) => {
  switch (action.type) {
    case 'SET_CURRENT_USER':
      return {
        ...state,
        currentUser: action.user,
      };

    default:
      return state;
  }
};

const actions = {
  setCurrentUser(user) {
    return {
      type: 'SET_CURRENT_USER',
      user,
    };
  },
};

const selectors = {
  getCurrentUser(state) {
    return state.currentUser;
  },
};

registerStore('wpgraphiql-ide', {
  reducer,
  actions,
  selectors,
});

Then to use this we could do something like:

Get the current user

import { useSelect } from '@wordpress/data';

const currentUser = useSelect((select) => {
  return select('wpgraphiql-ide').getCurrentUser();
}, []);

Set the current user

import { useDispatch } from '@wordpress/data';

const { setCurrentUser } = useDispatch('wpgraphiql-ide');

setCurrentUser({ name: 'John Doe', id: 1 });

[jasonbahl]

We've adopted @wordpress/data and redux stores to lift state out of components.

This should allow for 3rd party plugins to access state from the wpgraphql-ide store and use it even as a script enqueued by another plugin.

[jasonbahl]

Closing this as the initial implementation was merged in #47