Apollo 客户端调用每个突变和查询两次（React）

Posted 2023-03-08

【中文标题】Apollo 客户端调用每个突变和查询两次（React）

【英文标题】：Apollo Client calling every mutation and query twice (React)

【发布时间】：2020-01-23 23:37:22

【问题描述】：

每次我调用查询或突变时，它都会进行两次网络调用，然后我会创建项目。我尝试更改中间件，但仍然遇到相同的问题。 “阿波罗缓存内存”：“^1.2.2”， “阿波罗客户端”：“^2.3.2”， “阿波罗链接”：“^1.2.12”， “阿波罗链接上下文”：“^1.0.8”， "apollo-upload-client": "^11.0.0",

我尝试减少中间件并更改一些软件包，但仍然遇到同样的问题。

import  ApolloClient  from 'apollo-client'
import  InMemoryCache  from 'apollo-cache-inmemory'
import  appConfig  from 'config'
import  ApolloLink, from  from 'apollo-link'
import  logger  from 'libs/logger'
import  fetchKeyFromSession  from 'libs/session'
import  AUTHENTICATION_TOKEN  from 'constants/index'
import  createUploadLink  from 'apollo-upload-client'

const authMiddleware = new ApolloLink((operation, forward) => 
  logger(
    'GraphQL Interceptor ==>> ',
    operation.query.definitions[0].selectionSet.selections[0].name.value,
    window.location.pathname,
    operation.query.definitions[0].selectionSet.selections[0].arguments,
    window.location.pathname,
    operation.query.definitions[0].selectionSet.selections[0].arguments.map(
      arg => arg && arg.value && arg.value.name.value,
    ),
  )

  operation.setContext(
    headers: 
      Authorization: `Bearer $fetchKeyFromSession(AUTHENTICATION_TOKEN)`
    
  )

  forward(operation).subscribe(
    next: result => logger('Apollo Link Result ==>> ', result),
    error: error => logger('Apollo Link Error ==>> ', error.response),
  )



  return forward(operation)
)


const uploadLink = createUploadLink( uri: `$appConfig.config.BASE_URL/api/v1` )

const cache = new InMemoryCache()

const defaultOptions = 
  query: 
    fetchPolicy: 'no-cache',
    errorPolicy: 'all',
  ,


export const client = new ApolloClient(
  link: from([authMiddleware, uploadLink]),
  cache,
  defaultOptions,
  queryDeduplication: false
)

它根本不会抛出任何错误，但它应该只调用一次查询/突变而不是两次。由于这个原因，我在数据库中创建了两个项目。

【问题讨论】：

你使用模式拼接吗？您是否在一个请求中运行多个查询？

@KfirDadosh 不，我不是我只是发现 forward(operation).subscribe 在删除它后导致了问题，一切都开始正常工作，但我想为每个运行一些函数和日志请求、响应和错误，但问题是我在删除 forward(operation).subscribe 后找不到一个好方法。您的直升机将不胜感激

【参考方案1】：

const authMiddleware = new ApolloLink((operation, forward) => 
  logger(
    'GraphQL Interceptor ==>> ',
    operation.query.definitions[0].selectionSet.selections[0].name.value,
    window.location.pathname,
    operation.query.definitions[0].selectionSet.selections[0].arguments,
    window.location.pathname,
    operation.query.definitions[0].selectionSet.selections[0].arguments.map(
      arg => arg && arg.value && arg.value.name.value,
    ),
  )

  operation.setContext(
    headers: 
      Authorization: `Bearer $fetchKeyFromSession(AUTHENTICATION_TOKEN)`
    
  )

  return forward(operation)
)

forward(operation).subscribe() 导致问题删除它，它将开始正常工作。

【参考方案2】：

这是subscribe的替代方案：

forward(operation).forEach((data) => 
  data.errors?.forEach((error) => logger('Apollo Link Error ==>> ', error.response));
);