@client Apollo GQL 标记中断查询 [英] @client Apollo GQL tag breaks query

问题描述

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

I have a vue-apollo (using nuxt) query that is supposed to have a local client field show. However, when I have the show @client line included in the query the component does not render. For some reason it also seems to fail silently.

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

我在 extensions.js 文件(粘贴在下面)中扩展了 Calendar 类型，并有两个变化.

I am extending the Calendar type in an extensions.js file (pasted below) with two mutations.

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 配置:

Here is the resolver that sets the value, along with the Apollo config:

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

推荐答案

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

Querying local state requires the state to exist (i.e. it should be initialized) or for a local resolver to be defined for the field. Apollo will run the resolver first, or check the cache directly for the value if a resolver is not defined. There's not really a good way to initialize that value since it's nested inside a remote query, so you can add a resolver:

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

请参阅文档 了解更多示例和更多详细信息.

See the docs for additional examples and more details.

这篇关于@client Apollo GQL 标记中断查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！