@client Apollo GQL 标签中断查询
@client Apollo GQL tag breaks query
我有一个 vue-apollo
(使用 nuxt
)查询,应该显示本地客户端字段。但是,当我在查询中包含 show @client
行时,组件不会呈现。出于某种原因,它似乎也无声地失败了。
query myAccounts {
accounts: myAccounts {
email
calendars {
id
name
hex_color
is_enabled
show @client
}
}
}
我正在 extensions.js
文件(粘贴在下方)中扩展 Calendar
类型,其中包含两个突变。
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'
}
}
查询本地状态需要状态存在(即它应该被初始化)或为字段定义本地解析器。 Apollo 将首先 运行 解析器,如果未定义解析器,则直接检查缓存中的值。没有真正初始化该值的好方法,因为它嵌套在远程查询中,因此您可以添加一个解析器:
const resolvers = {
Calendar: {
show: (parent) => !!parent.show,
},
// the rest of your resolvers
}
有关其他示例和更多详细信息,请参阅 the docs。
我有一个 vue-apollo
(使用 nuxt
)查询,应该显示本地客户端字段。但是,当我在查询中包含 show @client
行时,组件不会呈现。出于某种原因,它似乎也无声地失败了。
query myAccounts {
accounts: myAccounts {
email
calendars {
id
name
hex_color
is_enabled
show @client
}
}
}
我正在 extensions.js
文件(粘贴在下方)中扩展 Calendar
类型,其中包含两个突变。
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'
}
}
查询本地状态需要状态存在(即它应该被初始化)或为字段定义本地解析器。 Apollo 将首先 运行 解析器,如果未定义解析器,则直接检查缓存中的值。没有真正初始化该值的好方法,因为它嵌套在远程查询中,因此您可以添加一个解析器:
const resolvers = {
Calendar: {
show: (parent) => !!parent.show,
},
// the rest of your resolvers
}
有关其他示例和更多详细信息,请参阅 the docs。