How to use mst-gql - 10 common examples

/* This is a mst-gql generated file, don't modify it manually */
/* eslint-disable */
import { types } from "mobx-state-tree"
import { MSTGQLStore, configureStoreMixin } from "mst-gql"

import { TodoModel } from "./TodoModel"
import { todoModelPrimitives, TodoModelSelector } from "./TodoModel.base"


/**
* Store, managing, among others, all the objects received through graphQL
*/
export const RootStoreBase = MSTGQLStore
  .named("RootStore")
  .extend(configureStoreMixin([['Todo', () => TodoModel]], ['Todo']))
  .props({
    todos: types.optional(types.map(types.late(() => TodoModel)), {})
  })
  .actions(self => ({
    queryTodos(variables, resultSelector = todoModelPrimitives.toString(), options = {}) {
      return self.query(`query todos { todos {
        ${typeof resultSelector === "function" ? resultSelector(new TodoModelSelector()).toString() : resultSelector}
      } }`, variables, options)
    },
    mutateToggleTodo(variables, resultSelector = todoModelPrimitives.toString(), optimisticUpdate) {
      return self.mutate(`mutation toggleTodo($id: ID!) { toggleTodo(id: $id) {
        ${typeof resultSelector === "function" ? resultSelector(new TodoModelSelector()).toString() : resultSelector}
      } }`, variables, optimisticUpdate)
    },
  }))

/* This is a mst-gql generated file, don't modify it manually */
/* eslint-disable */
import { types } from "mobx-state-tree"
import { MSTGQLStore, configureStoreMixin } from "mst-gql"

import { TodoModel } from "./TodoModel"
import { todoModelPrimitives, TodoModelSelector } from "./TodoModel.base"


/**
* Store, managing, among others, all the objects received through graphQL
*/
export const RootStoreBase = MSTGQLStore
  .named("RootStore")
  .extend(configureStoreMixin([['Todo', () => TodoModel]], ['Todo']))
  .props({
    todos: types.optional(types.map(types.late(() => TodoModel)), {})
  })
  .actions(self => ({
    queryTodos(variables, resultSelector = todoModelPrimitives.toString(), options = {}) {
      return self.query(`query todos { todos {
        ${typeof resultSelector === "function" ? resultSelector(new TodoModelSelector()).toString() : resultSelector}
      } }`, variables, options)
    },
    mutateToggleTodo(variables, resultSelector = todoModelPrimitives.toString(), optimisticUpdate) {
      return self.mutate(`mutation toggleTodo($id: ID!) { toggleTodo(id: $id) {
        ${typeof resultSelector === "function" ? resultSelector(new TodoModelSelector()).toString() : resultSelector}
      } }`, variables, optimisticUpdate)
    },

/* This is a mst-gql generated file, don't modify it manually */
/* eslint-disable */

import { createStoreContext, createUseQueryHook } from "mst-gql"
import * as React from "react"


export const StoreContext = createStoreContext(React)

export const useQuery = createUseQueryHook(StoreContext, React)

/* This is a mst-gql generated file, don't modify it manually */
/* eslint-disable */

import { createStoreContext, createUseQueryHook } from "mst-gql"
import * as React from "react"


export const StoreContext = createStoreContext(React)

export const useQuery = createUseQueryHook(StoreContext, React)

/* This is a mst-gql generated file, don't modify it manually */
/* eslint-disable */

import { createStoreContext, createUseQueryHook } from "mst-gql"
import * as React from "react"


export const StoreContext = createStoreContext(React)

export const useQuery = createUseQueryHook(StoreContext, React)

/* This is a mst-gql generated file, don't modify it manually */
/* eslint-disable */

import { createStoreContext, createUseQueryHook } from "mst-gql"
import * as React from "react"


export const StoreContext = createStoreContext(React)

export const useQuery = createUseQueryHook(StoreContext, React)

/* #endregion */

/* #region fragments */
export const queryPrimitives = `
id
__typename
`

/* #endregion */

/* #region type-def */

/**
* Query
*/
const Query = MSTGQLObject
.named('Query')
.props({
    messages: types.array(types.reference(types.late(() => Message))),
})
/* #endregion */

  .actions(self => ({
  // this is just an auto-generated example action. 
  // Feel free to add your own actions, props, views etc to the model. 
  // Any code outside the '#region mst-gql-*'  regions will be preserved
  log() {
    console.log(JSON.stringify(self))
  }
}))

export { Query }

/* #endregion */

/* #region fragments */
export const subscriptionPrimitives = `
id
__typename
`

/* #endregion */

/* #region type-def */

/**
* Subscription
*/
const Subscription = MSTGQLObject
.named('Subscription')
.props({
    newMessages: types.maybe(types.reference(types.late(() => Message))),
})
/* #endregion */

  .actions(self => ({
  // this is just an auto-generated example action. 
  // Feel free to add your own actions, props, views etc to the model. 
  // Any code outside the '#region mst-gql-*'  regions will be preserved
  log() {
    console.log(JSON.stringify(self))
  }
}))

export { Subscription }

/* #region fragments */
export const queryPrimitives = `
id
__typename
`

/* #endregion */

/* #region type-def */

/**
* Query
 *
 * Query any Pokémon by number or name
*/
const Query = MSTGQLObject
  .named('Query')
  .props({
    query: types.maybe(types.reference(types.late((): any => Query))),
  })
/* #endregion */

  .actions(self => ({
    // this is just an auto-generated example action. 
    // Feel free to add your own actions, props, views etc to the model. 
    // Any code outside the '#region mst-gql-*'  regions will be preserved
    log() {
      console.log(JSON.stringify(self))
    }
  }))

export { Query }

`

/* #endregion */

/* #region type-def */

/**
* User
*/
export const User = MSTGQLObject
  .named('User')
  .props({
    __typename: types.optional(types.literal("User"), "User"),
    id: types.identifier,
    email: types.string,
    trips: types.array(MSTGQLRef(types.late(() => Launch))),
  })
  .views(self => ({
    get store() {
      return self.__getStore()
    }
  })) /* #endregion */