Get started

Assuming you already have react installed...

yarn add mobx-depot mobx graphql

Next, enable experimental decorators in your tsconfig.json:

{
  ... // other config
  "compilerOptions": {
    ... // other options
    "experimentalDecorators": true
  }
}

Generate code

yarn mobx-depot generate http://localhost:3000/graphql --outDir src/models
(You can also provide a path to a schema.graphql or introspection.json file)

This will generate a src/models directory with the following structure:

depot (Don't touch anything in here. generate will overwrite this whole directory!)
- base
  - XBaseModel.ts
  - YBaseModel.ts
  - ZBaseModel.ts
- inputs
  - SomeOperationInput.ts
- mutations
  - SomeOperationMutation.ts
- queries
  - SomeOperationQuery.ts
- hooks.ts
- rootStore.tsx
- scalars.ts
XModel.ts (You can edit these!)
YModel.ts
ZModel.ts

CLI options

--include User,Post,Comment Whitelist object types to be generated into models (Comma-separated values)
--exclude UserMetadata,PostAnalytics Blacklist object types from being generated into models (Comma-separated values)

Only use one or the other, it doesn't make much sense to use both --include and --exclude.

--react true|false Include React utilities in generated output (defaults to true)
--idFieldName Name of the field used to identify object types (defaults to "id")
--depotDirName <name of directory> Directory that untouchable auto-generated code should be placed in (defaults to "depot")

You can reference these anytime in the CLI: yarn mobx-depot --help generate

Setup your app root

Your app will have some sort of src/App.tsx. You will need to initialize the client mobx-depot will use to make requests to your GraphQL API.

import { initializeDepotClient } from './models/depot';
// This may be different if you're not using Vite, or have some other environment variable for this.
const API_URL = import.meta.env.VITE_API_URL;
initializeDepotClient(API_URL, {
  // You can pass in any options that `graphql-request` supports, however there's an extra "defaultCachePolicy" option.
  // "cache-and-network" is the default, but you can change it if you want.
  defaultCachePolicy: 'cache-and-network',
});
export const App = () => {
  return (
    <div className="App">
      {/* ... */}
    </div>
  )
}

initializeDepotClient will initialize a DepotGQLClient, which is basically a wrapper around graphql-request's GraphQLClient that adds support for caching of responses.

Now you're ready to get cooking!