How deal with complex queries?

[villander]

I'm getting a bunch of errors when I try to use queries with variables.

// app/mirage/server.js

import { createServer } from "miragejs"
import { createGraphQLHandler } from "@miragejs/graphql"
import graphQLSchema from "app/gql/schema.gql"

export function makeServer() {
  return createServer({
    routes() {
      const graphQLHandler = createGraphQLHandler(graphQLSchema, this.schema);

      this.post("/graphql", graphQLHandler)
    }
  })
}

// schema

import { gql } from 'glimmer-apollo'

export const graphQLSchema = gql`
  type CurrentAccount {
    id: ID!
    name: String!
    flags: [String]!
    memberships: [Membership]
  }

  type Account {
    id: ID!
    accountType: String!
    isActive: Boolean!
    name: String!
  }

  type CurrentUser {
    id: ID!
    name: String!
    email: String!
    imageUrl: String!
    phone: String!
    isPeekAdmin: Boolean!
    currentAccountRoles: [String]
    accounts: [Account]
  }

  type Membership {
    id: ID!
    name: String!
    membershipVariants: [MembershipVariant!]!
  }

  type MembershipVariant {
    colorHex: String!
    creditsPerTerm: Int!
    description: String!
    externalName: String!
    id: ID!
    imageUrl: String!
    internalName: String!
  }

  type Query {
    currentAccount: CurrentAccount!
    currentUser: CurrentUser!
    memberships(id: ID!): [Membership!]!
  }
 `

// query

query CurrentAccountMembershipVariant($membershipId: ID, $variantId: ID) {
  currentAccount {
    id
    memberships(id: $membershipId) {
      id
      membershipVariants(id: $variantId) {
        id
        internalName
        externalName
        description
        currency
        creditsPerTerm
        imageUrl
        colorHex
        validBetween
        validFor {
          amount
          unit
        }
        creditWindow {
          unit
          amount
        }
      }
    }
  }
}

Could you please give some help here @jneurock I might be missing something?

[jneurock]

I think you're running into the auto-filtering logic of Mirage GraphQL (see #34).

In this case, you'll want to add a custom resolver.

Something like this:

// app/mirage/server.js

import { createServer } from "miragejs"
import { createGraphQLHandler } from "@miragejs/graphql"
import graphQLSchema from "app/gql/schema.gql"

export function makeServer() {
  return createServer({
    routes() {
      const graphQLHandler = createGraphQLHandler(graphQLSchema, this.schema, {
        resolvers: {
          Query: {
            currentAccount(_obj, args, context) {
              let currentAccount; // Fetch current account from the Mirage DB or build it up however you need
              let membership = context.mirageSchema.memberships.find(args.membershipId);
              let membershipVariant = context.mirageSchema.membershipVariants.find(args.variantId);

              return {
                ...currentAccount,
                memberships: [{
                   ...membership,
                   membershipVariants: [{
                     ...membershipVariant
                   }],
                }],
              };
            }
          }
        }
      });

      this.post("/graphql", graphQLHandler)
    }
  })
}

Apologies for any typos or incorrect method invocations from Mirage's API. IDK how you want to fetch or create the currentAccount record so I just left a comment there in the example.

LMK if this helps for now.

[sebamza17]

@jneurock
Thank you for your answer!
I'm working with @villander on this, but for us, queries are working out of the box; but we're having an issue with mutations

we're adding this to our graphQLHandler as resolvers to handle a specific mutation we're trying to test

  UpdateMembershipInstanceResponse: {
    resolveType: () => {
      return 'UpdateMembershipInstanceSuccess'
    }
  }

  Mutation: {
    updateMembershipInstance: (obj, args, context) => {
      const { mirageServer } = context
      const { id: membershipInstanceId } = args.input
      const membershipInstance = mirageServer.schema.membershipInstances.find(membershipInstanceId)

      if (membershipInstance) {
        membershipInstance.update(args.input)
      }

      return mirageGraphQLFieldResolver(...arguments)
    }
  }

and in our schema

  // miragejs/schema.js
  ...
  type MembershipInstance {
    ...
  }

  type Mutation {
    updateMembershipInstance(input: UpdateMembershipInstanceInput): UpdateMembershipInstanceResponse
  }

  input UpdateMembershipInstanceInput {
    ...
  }

  union UpdateMembershipInstanceResponse = UpdateMembershipInstanceSuccess | Error

  type UpdateMembershipInstanceSuccess {
    membershipInstance: MembershipInstance
  }

  type Error {
    message: String
  }
  ...

this basically works, it grabs mirage data and updates what we need to update, but as per these docs https://github.com/miragejs/graphql#example-deleting-a-person, this should return mirageGraphQLFieldResolver(...arguments), but we're having an issue with (probably) the resolver for UpdateMembershipInstanceResponse, this is what we're getting

"Abstract type "UpdateMembershipInstanceResponse" must resolve to an Object type at runtime for field "Mutation.updateMembershipInstance". Either the "UpdateMembershipInstanceResponse" type should provide a "resolveType" function or each possible type should provide an "isTypeOf" function."

any ideas would be welcome!

[jneurock]

Hey @sebamza17, since this new issue isn't directly related to the original, shall we discuss elsewhere? The Mirage Discord works well for me or you can open another GH issue.