@client Apollo GQL标记中断查询

时间:2019-09-04 01:09:36

标签: graphql apollo apollo-client vue-apollo

我有一个vue-apollo(使用nuxt)查询,该查询应该显示本地客户端字段。但是,当查询中包含show @client行时,该组件不会呈现。由于某种原因,它似乎也无声地失败了。

query myAccounts {
  accounts: myAccounts {
    email
    calendars {
      id
      name
      hex_color
      is_enabled
      show @client
    }
  }
}

我正在Calendar文件(下面粘贴)中扩展extensions.js类型,有两个突变。

import gql from 'graphql-tag'

export const typeDefs = gql`
  extend type Calendar {
    show: Boolean
  }
  type Mutation {
    showCalendar(id: ID!): Boolean
    hideCalendar(id: ID!): Boolean
  }
`

以下是设置值以及Apollo配置的解析器:

import { InMemoryCache } from 'apollo-cache-inmemory'
import { typeDefs } from './extensions'
import MY_ACCOUNTS_QUERY from '~/apollo/queries/MyAccounts'

const cache = new InMemoryCache()

const resolvers = {
  Mutation: {
    showCalendar: (_, { id }, { cache }) => {
      const data = cache.readQuery({ query: MY_ACCOUNTS_QUERY })
      const found = data.accounts
        .flatMap(({ calendars }) => calendars)
        .find(({ id }) => id === '1842')
      if (found) {
        found.show = true
      }
      cache.writeQuery({ query: todoItemsQuery, data })
      return true
    }
  }
}

export default context => {
  return {
    cache,
    typeDefs,
    resolvers,
    httpLinkOptions: {
      credentials: 'same-origin'
    },
  }
}

以及nuxt配置:

apollo: {
  defaultOptions: {
    $query: {
      loadingKey: 'loading',
      fetchPolicy: 'cache-and-network',
    },
  },
  errorHandler: '~/plugins/apollo-error-handler.js',
  clientConfigs: {
    default: '~/apollo/apollo-config.js'
  }
}

1 个答案:

答案 0 :(得分:1)

查询本地状态要求该状态存在(即应初始化)或为该字段定义一个本地解析器。 Apollo将首先运行解析器,或者如果未定义解析器,则直接检查缓存中的值。初始化该值实际上不是一个好方法,因为它嵌套在远程查询中,因此您可以添加解析器:

const resolvers = {
  Calendar: {
    show: (parent) => !!parent.show,
  },
  // the rest of your resolvers
}

有关其他示例和更多详细信息,请参见the docs