javascript - GraphQL/中继架构无法查询类型 "store"上的字段 "CreateLinkPayload"

Question

我可以使用 CURL 和 GraphiQL 工具成功地进行 graphql/relay 查询和突变:

然而，在我的 react /中继应用程序中，我可以查询并将数据输入应用程序，但是每次我尝试改变我的应用程序中的某些内容时，我都会在控制台中收到此错误:

    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

每次我执行 npm start 时都会收到此错误:

-- 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

部分 Link.js

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

部分 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')}
            }
          }
        }
      }
    `

  }
})

部分main.js

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

我的 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

请注意，我在顶部排除了 40 行 require 语句。

这怎么可能？我该如何解决？会不会是relay/react的bug？

Answer 1

在 CreateLinkMutation(CreateLinkMutation.js 文件)的客户端实现中，getFatQuery() 函数指定在突变完成后它期望两个输出 - linkEdge 和 store。因此，在变更的服务器端实现中，您必须将这两个内容作为输出。但是，只有 linkEdge 包含在当前实现中的突变输出中(createLinkMutation 在 schema.js 文件中)。要解决此问题，请将 store 包含到输出中。

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