GraphQL / Relay架构无法在“CreateLinkPayload”类型上查询字段“store”

Question

I can successfully do graphql/relay queries and mutations with CURL and GraphiQL tool:

However, in my react/relay app I can query and get the data into the app, but every time I try to mutate something in my app, I get this error in the console:

    bundle.js:51511 Uncaught Error: GraphQL validation error ``Cannot query field "store" on type "CreateLinkPayload".`` in file 
`/Users/johndoe/react-relay-project/src/mutations/CreateLinkMutation.js`. Try updating your GraphQL schema if an argument/field/type was recently added.
(anonymous function) @ bundle.js:51511
getFatQuery @ bundle.js:51512
getFatQuery @ bundle.js:35664
getQuery @ bundle.js:35791
_handleCommit @ bundle.js:35539
commit @ bundle.js:35453
commit @ bundle.js:35894
(anonymous function) @ bundle.js:28526

and every time I do npm start I get this error:

-- GraphQL Validation Error -- CreateLinkMutation --

File:  /Users/johndoe/react-relay-project/src/mutations/CreateLinkMutation.js
Error: Cannot query field "store" on type "CreateLinkPayload".
Source:
> 
>         store { linkConnection }
>         ^^^

CreateLinkMutation.js

import Relay from 'react-relay'

class CreateLinkMutation extends Relay.Mutation {
  getMutation() {
    return Relay.QL`
      mutation { createLink }
    `
  }

  getVariables() {
    return {
      title: this.props.title,
      url: this.props.url
    }
  }

  getFatQuery() {
    return Relay.QL`
      fragment on CreateLinkPayload {
        linkEdge,
        store { linkConnection }
      }
    `
  }

  getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'store',
      parentID: this.props.store.id,
      connectionName: 'linkConnection',
      edgeName: 'linkEdge',
      rangeBehaviors: {
        '': 'append'
      }
    }]

  }
}

export default CreateLinkMutation

parts of Link.js

Link = Relay.createContainer(Link, {
  fragments: {
    link: () => Relay.QL`
      fragment on Link {
        url,
        title
      }
    `
  }
})

parts of App.js

 handleSubmit(e) {
    e.preventDefault()
    Relay.Store.update(
      new CreateLinkMutation({
        title: this.refs.newTitle.value,
        url: this.refs.newUrl.value,
        store: this.props.store
      })
    )
    this.refs.newTitle.value = ''
    this.refs.newUrl.value = ''
  }



App = Relay.createContainer(App, {
  initialVariables: {
    limit: 10
  },
  fragments: {
    store: () => Relay.QL`
      fragment on Store {
        id,
        linkConnection(first: $limit) {
          edges {
            node {
              id,
              ${Link.getFragment('link')}
            }
          }
        }
      }
    `

  }
})

parts of main.js

class LinkStoreRoute extends Relay.Route {
  static routeName = 'LinkStoreRoute'
  static queries = {
    store: () => Relay.QL`query { store }`
  }
}

My schema.js :

const store = {}

const Store = new GraphQLObjectType({
  name: 'Store',
  fields: () => ({
    id: globalIdField('Store'),
    linkConnection: {
      type: linkConnection.connectionType,
      args: connectionArgs,
      resolve: (_, args) => {
        return docClient.scan(
          Object.assign(
            {},
            {TableName: linksTable},
            paginationToParams(args)
          )
        ).promise().then(dataToConnection)
      }
    }
  })
})

const Link = new GraphQLObjectType({
  name: 'Link',
  fields: () => ({
    id: {
      type: new GraphQLNonNull(GraphQLID),
      resolve: (obj) => obj.id
    },
    title: { type: GraphQLString },
    url: { type: GraphQLString }
  })
})

const linkConnection = connectionDefinitions({
  name: 'Link',
  nodeType: Link
})

let createLinkMutation = mutationWithClientMutationId({

  name: 'CreateLink',

  inputFields: {
    title: { type: new GraphQLNonNull(GraphQLString) },
    url: { type: new GraphQLNonNull(GraphQLString) }
  },

  outputFields: {
    linkEdge: {
      type: linkConnection.edgeType,
      resolve: (obj) => ({node: obj, cursor: obj.id})
    }
  },

  store: {
    type: Store,
    resolve: () => store
  },

  mutateAndGetPayload: (inputFields) => {

    let link = {
      id: uuid.v4(),
      title: inputFields.title,
      url: inputFields.url
    }

    return new Promise((resolve, reject) => {
      docClient.put(
        Object.assign(
          {},
          {TableName: linksTable},
          {Item: link}
        ),
        (err, data) => {
          if (err) return reject(err)
          return resolve(link)
        }
      )
    })
  }
})

const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: () => ({
      store: {
        type: Store,
        resolve: () => store
      }
    })
  }),

  mutation: new GraphQLObjectType({
    name: 'Mutation',
    fields: () => ({
      createLink: createLinkMutation
    })
  })
})

module.exports = schema

Note that I excluded 40 lines of require statements at the top.

How is this even possible? And how can I fix it? Could it be a bug of relay/react?

Answer 1

In your client-side implementation of CreateLinkMutation (CreateLinkMutation.js file), getFatQuery() function specifies that it expects two outputs after the mutation is complete - linkEdge and store . Therefore, in your server-side implementation of the mutation, you must include these two things as output. However, only linkEdge is included to the mutation's outputs in your current implementation ( createLinkMutation in schema.js file). To solve the problem, include store to the outputs.

outputFields: {
  linkEdge: {
    type: linkConnection.edgeType,
    resolve: (obj) => ({node: obj, cursor: obj.id})
  },
  store: {
    type: Store,
    resolve: () => store
  },
},

Answer 2

Turns out store

  store: {
    type: Store,
    resolve: () => store
  }

has to go inside outputFields like so:

  outputFields: {
    linkEdge: {
      type: linkConnection.edgeType,
      resolve: (obj) => ({node: obj, cursor: obj.id})
    }
    store: {
      type: Store,
      resolve: () => store
    }
  }