标签: apollo

我正在使用的堆栈

• Scaphold.io作为我的 GraphQL 服务器
• 客户端的Vue Apollo
• 用于处理拖放的Vue Draggable库

我正在尝试做什么

我正在构建一个向用户呈现多个列表的应用程序，每个列表都包含多张卡片。在列表中，用户可以对卡片重新排序。卡片也可以从一个列表移动到另一个列表，这会更改卡片的父列表以及卡片在源列表和目标列表中的顺序。

这是一个 GIF，显示了我的应用程序中的卡片/列表和重新排序的 UI。您在这里看到的都是在客户端发生的，并且更改不会持久保存到数据库中：

这是我用来构建 UI 的查询：

const foo = gql`
  query foo {
    getAccount(id: "xxxxx") {
      cardLists {        
        edges {
          node {
            id
            name
            cards(orderBy: {field: order, direction: ASC}) {
              edges {
                node {
                  id
                  name
                  order
                }
              }
            }
          }
        }
      }
    }
  }
`

这是来自 Vue Draggable 项目的 GIF，它进一步说明了我正在做的事情（注意数据中的“order”值）：

问题

我不知道如何构建突变来处理重新排序，以便正确保留移动的卡以及源列表和目标列表的排序更改。

在 Scaphold 中构建模式意味着我需要（我认为）使用它提供的突变。我没有找到将多个卡片和列表传递给单个突变的方法，以便我可以立即更新所有内容。

以下是 Scaphold.io 中示例项目的端点：https://us-west-2.api.scaphold.io/graphql/soreorderingexample

这是 Scaphold.io 生成的架构：https://d3uepj124s5rcx.cloudfront.net/items/1e1m2q3F170C2G3M0v2p/schema.json

我的问题

• 在 GraphQL …

我正在使用 Apollo iOS 客户端进行 GraphQL 查询。我需要在标头中传递身份验证令牌，我可以使用下面的代码来实现 -

let apolloAuth: ApolloClient = {
            let configuration = URLSessionConfiguration.default
            let token = "Bearer \(UserDefaults.standard.string(forKey: "UserToken") ?? "")"
            // Add additional headers as needed
            configuration.httpAdditionalHeaders = ["Authorization": token]

            let url = URL(string: "...URL.../graphql")!

            return ApolloClient(networkTransport: HTTPNetworkTransport(url: url, configuration: configuration))
        }()

我的获取查询如下 -

apolloAuth.fetch(query: referralQuery){ (result, error) in

        if let error = error {
            print(error.localizedDescription)
            return
        }else{
            self.referralId = result?.data?.referrals?.id
        }

    }

现在，我的服务器在每个请求后返回刷新的身份验证令牌，这是响应标头的一部分。我需要从响应标头获取令牌，但我无法找到方法来做到这一点。有人可以指导我吗？

假设我有一个mutation有typearg 的对象。根据typeI 的值，可以接受mutation另一个arg输入类型，也可以mutation不使用它进行调用。

如何实施graphql？我知道对于查询有@skip指令@include（对于字段，而不是参数）。有类似的东西吗mutations？或者我应该将附加参数指定为可选，然后在服务器上进行验证？

我有一个使用graphql-go实现的 graphql 服务器，并且我在前端使用 Apollo。不带参数的简单查询和使用输入对象类型的突变工作正常，但由于某种原因在查询中传递标量类型参数会返回错误：

[{"message":"Unknown type \"Int\".","locations":[{"line":1,"column":19}]}]

我的使用再简单不过了；在客户端，我的查询是：

export const GET_CLIENT = gql`
  query client($id: Int) {
  client(id: $id) {
    id
    name
  }
}`

它在像这样的组件中使用：

<Query
  query={GET_CLIENT}
  variables={{
    id: 1
  }} />

它在后端解析为该字段：

// ClientQuery takes an ID and returns one client or nil
var ClientQuery = &graphql.Field{
Type: ClientType,
Args: graphql.FieldConfigArgument{
    "id": &graphql.ArgumentConfig{
        Type: graphql.Int,
    },
},
Resolve: func(p graphql.ResolveParams) (interface{}, error) {
    return p.Context.Value("service").(*model.Service).FindClientByID(id)
},
}

我尝试过传递输入对象、字符串等，但后端似乎没有满足任何查询参数、标量或其他参数。我尝试过 graphql-go 的 master 和 v0.7.5。我错过了什么吗？非常感谢帮助，这种基本的东西成为如此巨大的阻碍者感觉很奇怪。

这是一个可重现的示例。在http://localhost:4000/graphql上运行app.js并导航游乐场

您可以运行如下查询：

query RecipeQuery{
  recipe(title:"Recipe 2"){
    description
  }
}

问题：

我需要extensions响应数据中现场的调试信息。我说的是这个extensions领域：

  "data":{....},
  "extensions": {
    "tracing": {}
    "cacheControl":{}
  }

但实际上，我只获取数据字段：

  "data":{....}

我已经在 apollo 服务器配置中启用了tracing和，但该字段仍然被排除在响应数据中。我怎样才能取回数据？cacheControlextensionsextensions

以下是阿波罗引擎的启动方式：

const expressApp = express();

const server = new ApolloServer({
    schema,
    tracing: true,
    cacheControl: true,
    engine: false, // we will provide our own ApolloEngine
});

server.applyMiddleware({ app: expressApp });

const engine = new ApolloEngine({
    apiKey: "YOUR_ID",

});

engine.listen(
    {
        port,
        expressApp,
        graphqlPaths: …

我的 React 应用程序利用 Apollo 的自动缓存更新来更新 UI。我想使用该mutate函数的 optimistResponse 选项，但它没有按预期工作。我想知道是否有必要update向 mutate 函数添加一个选项，或者 apollo 是否应该能够使用 id 和类型名自动更新缓存。

以下是我提供的选项：

mutate({                                             
   variables: {id: attendee_record_id, meal_choice: meal_option},                                            
   optimisticResponse: {                                                 
       __typename: 'Mutation',                                              
       updateAttendeeRecord: {                                                   
       __typename: "UpdateAttendeeRecordPayload",                                                    
       attendee_record: {                                                        
           __typename: "AttendeeRecord",                                                         
           id: attendee_record_id,                                                       
           meal_choice: meal_option,                                                     
       }                                                 
   }                                            
})

膳食选择会更新，但结果不会显示在用户界面中，直到服务器响应。

我在 Apollo/Graphql Expressjs 服务器上设置了 apollo-datasource-rest 数据源。我想将 fetch 响应中的一些标头转发到 /graphql 响应。

这是流程：

POST /graphql

Graphql makes fetch request using this.get('http://example.com/api')
Response from this fetch contains the header "cache-status"

Response from /graphql
I'd like to include the "cache-status" header from the example.com/api response here in the /graphql response

我在其余数据源类的 didReceiveResponse() 方法中看到了标头。我不确定这是访问和存储它的正确位置。如何在 POST /graphql 响应中包含“cache-status”标头？

我知道这个问题由来已久——而且这并不是什么灵丹妙药。但我认为可能有一个固定的模式，我不想发明轮子。

考虑以下两个架构选项：

方法1）我原来的实现

type Query {
  note(id: ID!): Note
  notes(input: NotesQueryInput): [Note!]!
}

方法2）我目前的实验方法

type DatedId {
  date: DateTime!
  id: ID!
}

type Query {
  note(id: ID!): Note
  notes(input: NotesQueryInput): [DatedId!]!
}

差异是：

使用方法 1) 注释查询将返回可能较大的注释对象的列表

使用方法 2），notes 查询将返回更轻的有效负载，但随后需要执行n 个额外的查询

所以我的问题是带有内存缓存的Apollo 客户端/服务器堆栈，这是最好的方法。实现具有可扩展服务器的响应式客户端。

• 使用方法 1——我的 500mb dyno（heroku 服务器）内存不足。

• 我希望无论采用哪种方法，我都会使用连接/边缘模式实现分页

• graphql 服务器主要是为我自己的前端提供服务。

大约一年前，对apollo-server（或react-apollo？）进行了更新，这完全打破了 GraphQL 请求中省略可空输入的旧用法。

在更新之前，您可以定义如下内容：

Mutation {
  editProfile(id: ID!, name: String, avatar: String)
}

当调用省略输入的客户端时，请说：

editProfile(id: "whateverid", name: "James")

你在你的解析器中得到avatar了undefined。 现在已设置为null.

问题是：null例如，对于某些可选输入来说 是一个完全有效的值avatar。所以基本上，我们在这个过程中丢失了信息，并且不再能够区分服务器端之间的区别：

• 被省略并出现的可选输入null（=不更新数据库），以及
• 显式设置为null（= 更新数据库）的可选输入

我在 Github 上打开了一个关于它的线程：https ://github.com/apollographql/apollo-server/issues/2056

一年前，另一个人在react-apolloGithub 上做了同样的事情： https: //github.com/apollographql/react-apollo/issues/1569

dacz 发布了一个有趣的回复，总结得很好：

当可空输入未出现在 apollo 客户端的查询变量中时，将使用空值进行调用。客户端不应将整个输入作为 null 传递，而应完全省略它或以 undefined 传递它。传递 null 可能意味着显式将输入设为 null。同样适用于输入字段，因此服务器可能会对显式重置值做出反应（在输入中显示为 null，或者如果省略则不处理它）。

这两个线索仍然悬而未决。

有人对此有任何干净的解决方案吗？

测试 Apollo GraphQL 服务器的标准方法是使用Apollo 测试客户端。该createTestClient方法需要一个server参数。GraphQLModule在 NestJS/TypeGraphQL 应用程序中，访问（Jest）测试内部创建的 Apollo 服务器的适当方法是什么？