@client Apollo GQL 标签中断查询

Posted

技术标签:

【中文标题】@client Apollo GQL 标签中断查询【英文标题】:@client Apollo GQL tag breaks query 【发布时间】:2020-01-06 20:51:47 【问题描述】:

我有一个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 客户端配置。 已添加。我想知道如果缓存中没有键/值会如何失败,因为只有在发生突变时才会设置。 【参考方案1】:

查询本地状态需要状态存在(即它应该被初始化)或为字段定义本地解析器。 Apollo 将首先运行解析器,如果未定义解析器,则直接检查缓存中的值。由于它嵌套在远程查询中,因此没有真正的初始化该值的好方法,因此您可以添加解析器:

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

有关更多示例和更多详细信息,请参阅 the docs。

【讨论】:

以上是关于@client Apollo GQL 标签中断查询的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Apollo Client 的 gql 查询中定义类型?

如何使用 GQL 从 React 前端的 Apollo 客户端获取错误

useMutation 不改变本地状态

Apollo Server 的 gql 标签和 schema.gql 文件有啥区别?

@apollo/client 反应钩子 useQuery() 数据未定义

@Nuxt/Apollo 如何从 gql 查询中删除“__typeName”