本地客户端上的 Apollo 不会触发本地解析器

Question

在本地状态客户端（前端本地状态）的情况下，Apollo 不会触发解析器。阿波罗 2.7

有人知道为什么会这样吗？

设置如下：

阿波罗客户端

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import fetch from 'isomorphic-unfetch'

import { resolvers, typeDefs } from './resolvers';
import { initCache } from './init-cache';

export default function createApolloClient(initialState, ctx) {
  // The `ctx` (NextPageContext) will only be present on the server.
  // use it to extract auth headers (ctx.req) or similar.
  return new ApolloClient({
    ssrMode: Boolean(ctx),
    link: new HttpLink({
      uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
      credentials: 'include', // Additional fetch() options like `credentials` or `headers`
      fetch,
    }),
    typeDefs,
    resolvers,
    connectToDevTools: true,
    cache: initCache({
                   robot: {
                     __typename: 'Robot',
                     name: 'Robbie',
                     status: 'live',
                    },

                  member: {
                     __typename: 'Member',
                     name: 'RFesagfd',
                     }
                   }),
     })
  }

类型和解析器 (resolvers.js)

import gql from 'graphql-tag';

export const typeDefs = gql`
  type Robot {
    name: String!
    status: String!
  }

  type Member {
    name: String!
    isLogged: Boolean!
  }

`;

export const resolvers = {
  Member: {
    isLogged: (...args) => {
      console.log('args', args); // THIS NEVER TRIGGERS SOMEHOW
      return true;
    }
  }
};

查询

const GET_IS_MEMBER_LOGGED = gql`
  query isMemberLogged {
    member @client {
      name
      isLogged
    }
  }
`;

感谢您的帮助！

Answer 1

您需要定义本地查询的结果类型：

const typeDefs = gql`
  extend type Query {
    robot: Robot
    member: Member
  }

...和查询的解析器 - 不是类型（因为您将整个查询装饰为本地）...但是您必须返回输入的数据：： p>

export const resolvers = {
  Query: {
    member: (...args) => {
      console.log('args', args); 
      return {
        __typename: 'Member',
        name: 'some name', // read from cache
        isLogged: true // function result
      };
    }
  }
};

您还应该使用__typename 进行缓存写入。

更新

假设您在缓存中有一个成员...您可以：

// read (initialized with permanent) data:
const memberData = cache.readQuery(....
// f.e. it should have `__typename` and 'name`
// ... and 'decorate' it with derived properites
memberData.age = currentYear - memberData.birthYear;
memberData.isLogged = someFuncReturningBool();
return memberData; // Member type shaped object

这是关于形状/数据组织 - 类型化（返回具有定义属性的类型形状对象）或简单（单独返回所有属性）或混合，例如（一些全局应用状态）

const GET_IS_MEMBER_LOGGED = gql`
  query profileViewData {
    member @client {
      name
      isLogged
    }
    isProfilePanelOpen @client
    termsAccepted @client
  }
`;

Answer 2

我找到了一个可能的解决方案。也许这些信息对某人有用。 如果我们想省略查询解析器 + 字段解析器，并且我们想要拥有唯一的字段解析器，我们需要使用 @client(always: true)。

深入解释

一般来说，Apollo 客户端如何使用 Cache 存在问题。 默认情况下，它会缓存响应，下次它会从缓存中获取缓存的结果（例如optimistic UI）。即使在客户端的情况下，此行为也是相同的。

这意味着当我们在缓存中有初始模型时，Apollo 将从缓存中获取并忽略解析器，即使我们传递了@client 指令。 为了解决这个问题并让 Apollo 知道我们需要使用本地解析器，即使我们有缓存的对象，我们也需要对首选字段或整个对象使用 @client(always: true)。我在下面做了一个例子。

附言不幸的是，我没有找到如何强制 Apollo 使用不存在的字段，所以如果我们想为特定字段提供一些解析器，我们仍然需要将初始字段值定义为初始缓存模型，让 Apollo 知道这个领域。之后，感谢 @client(always: true)，Apollo 将使用解析器为该特定字段生成一些高计算输出。
一般来说，没关系，因为我们应该知道我们的模型中会有什么样的动态场。

阿波罗客户端

import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import fetch from 'isomorphic-unfetch'

import { resolvers, typeDefs } from './resolvers';
import { initCache } from './init-cache';

export default function createApolloClient(initialState, ctx) {
  // The `ctx` (NextPageContext) will only be present on the server.
  // use it to extract auth headers (ctx.req) or similar.
  return new ApolloClient({
    ssrMode: Boolean(ctx),
    link: new HttpLink({
      uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
      credentials: 'include', // Additional fetch() options like `credentials` or `headers`
      fetch,
    }),
    typeDefs,
    resolvers,
    connectToDevTools: true,
    cache: initCache({
                     author: {
                     __typename: 'Author',
                     posts: 0,
                     name: '' // NEED TO SET AN INITIAL VALUE
                     }
     })
  }

类型和解析器 (resolvers.js)

import gql from 'graphql-tag';
import { print  } from 'graphql';

export const typeDefs = gql`
  type Author {
    posts: Int!
    name: String
  }

`;


export const resolvers = {
  Author: {
    name(author) {
      console.log('Author name resolver', author). // WORKS
      return 'NAME';
    },
  },

};

查询

const GET_AUTHOR = gql`
  query getAuthor {
    author {
      posts
      name @client(always: true)
    }
  }
`;