看起来 apollo 客户端不会查询 id 具有 . (点)使用 Next JS 和 Sanity CMS with GraphQL

Posted

技术标签:

【中文标题】看起来 apollo 客户端不会查询 id 具有 . (点)使用 Next JS 和 Sanity CMS with GraphQL【英文标题】:Looks like apolloClient does not query entries with id that has . (dot) in them using NextJS and SanityCMS with GraphQL 【发布时间】:2021-12-22 20:38:55 【问题描述】:

我有一个带有一些数据和本地化(翻译)的 SanityCMS,当创建文档时,它们会得到一个类似于 i18n.b4d654f7-2b47-4339-9a92-d9ad5d111b43.no 的 ID,其中最后一个分隔符是语言环境/语言。

当我使用命令sanity graphql deploy 时,我得到了一个部署在操场上的 api 来测试 GraphQL 查询。这个游乐场运行良好,可以显示我想看的一切。

但是我在 NextJS 中有一个前端,我使用 ApolloClient 与 Sanity 部署的这个 api 进行通信。我使用在为 ApolloClient 创建 Playground/api 时创建的相同 URI,但由于某些奇怪的原因,它只获取没有任何点分隔的 ID

一个基本的测试查询如下所示:

query test 
    allPage 
      title
      i18n_lang
      _id
    
  

这是从 apolloclient 获取的数据(您只能看到没有任何点分隔的 _id):


  allPage: [
    
      __typename: 'Page',
      title: 'Men',
      i18n_lang: 'en',
      _id: '14df2893-d9e5-439d-a966-d41371085cf8'
    ,
    
      __typename: 'Page',
      title: 'Startpage - en',
      i18n_lang: 'en',
      _id: '179f7877-61c8-44be-9c0b-c5abb631c4d7'
    ,
    
      __typename: 'Page',
      title: 'Women',
      i18n_lang: 'en',
      _id: '40f6584c-1a1c-4574-8837-cfd9e9d062c7'
    ,
    
      __typename: 'Page',
      title: 'Badetøy',
      i18n_lang: 'en',
      _id: '49efb30f-f6e9-4aff-9d7f-944972d3a276'
    ,
    
      __typename: 'Page',
      title: 'Shoes',
      i18n_lang: 'en',
      _id: '9f9d1c7e-f983-4608-a066-327de0f5241e'
    ,
    
      __typename: 'Page',
      title: 'Sneakerss',
      i18n_lang: 'en',
      _id: 'b4d654f7-2b47-4339-9a92-d9ad5d111b43'
    ,
    
      __typename: 'Page',
      title: 'test',
      i18n_lang: null,
      _id: 'c8a744b1-79f2-48e5-9fec-7be13a8af9df'
    
  ]

这是来自操场的数据(在这里清楚地看到其他 id):


  "data": 
    "allPage": [
      
        "title": "Men",
        "i18n_lang": "en",
        "_id": "14df2893-d9e5-439d-a966-d41371085cf8"
      ,
      
        "title": "Startpage - en",
        "i18n_lang": "en",
        "_id": "179f7877-61c8-44be-9c0b-c5abb631c4d7"
      ,
      
        "title": "Women",
        "i18n_lang": "en",
        "_id": "40f6584c-1a1c-4574-8837-cfd9e9d062c7"
      ,
      
        "title": "Badetøy",
        "i18n_lang": "en",
        "_id": "49efb30f-f6e9-4aff-9d7f-944972d3a276"
      ,
      
        "title": "Shoes",
        "i18n_lang": "en",
        "_id": "9f9d1c7e-f983-4608-a066-327de0f5241e"
      ,
      
        "title": "Sneakerss",
        "i18n_lang": "en",
        "_id": "b4d654f7-2b47-4339-9a92-d9ad5d111b43"
      ,
      
        "title": "test",
        "i18n_lang": null,
        "_id": "c8a744b1-79f2-48e5-9fec-7be13a8af9df"
      ,
      
        "title": "Startpage - en",
        "i18n_lang": "en",
        "_id": "drafts.179f7877-61c8-44be-9c0b-c5abb631c4d7"
      ,
      
        "title": "Shoes",
        "i18n_lang": "en",
        "_id": "drafts.9f9d1c7e-f983-4608-a066-327de0f5241e"
      ,
      
        "title": "Sneakerssssss",
        "i18n_lang": "en",
        "_id": "drafts.b4d654f7-2b47-4339-9a92-d9ad5d111b43"
      ,
      
        "title": "Kille",
        "i18n_lang": "se",
        "_id": "drafts.i18n.14df2893-d9e5-439d-a966-d41371085cf8.se"
      ,
      
        "title": "Startpage - no",
        "i18n_lang": "no",
        "_id": "drafts.i18n.179f7877-61c8-44be-9c0b-c5abb631c4d7.no"
      ,
      
        "title": "Badetøy",
        "i18n_lang": "no",
        "_id": "drafts.i18n.49efb30f-f6e9-4aff-9d7f-944972d3a276.no"
      ,
      
        "title": "Badetøy",
        "i18n_lang": "se",
        "_id": "drafts.i18n.49efb30f-f6e9-4aff-9d7f-944972d3a276.se"
      ,
      
        "title": "Sko",
        "i18n_lang": "no",
        "_id": "drafts.i18n.9f9d1c7e-f983-4608-a066-327de0f5241e.no"
      ,
      
        "title": "Joggesko",
        "i18n_lang": "no",
        "_id": "drafts.i18n.b4d654f7-2b47-4339-9a92-d9ad5d111b43.no"
      ,
      
        "title": "Herre",
        "i18n_lang": "no",
        "_id": "i18n.14df2893-d9e5-439d-a966-d41371085cf8.no"
      ,
      
        "title": "Kille",
        "i18n_lang": "se",
        "_id": "i18n.14df2893-d9e5-439d-a966-d41371085cf8.se"
      ,
      
        "title": "Startpage - no",
        "i18n_lang": "no",
        "_id": "i18n.179f7877-61c8-44be-9c0b-c5abb631c4d7.no"
      ,
      
        "title": "Startpage - se",
        "i18n_lang": "se",
        "_id": "i18n.179f7877-61c8-44be-9c0b-c5abb631c4d7.se"
      ,
      
        "title": "Dame",
        "i18n_lang": "no",
        "_id": "i18n.40f6584c-1a1c-4574-8837-cfd9e9d062c7.no"
      ,
      
        "title": "Sko",
        "i18n_lang": "no",
        "_id": "i18n.9f9d1c7e-f983-4608-a066-327de0f5241e.no"
      ,
      
        "title": "Skor",
        "i18n_lang": "se",
        "_id": "i18n.9f9d1c7e-f983-4608-a066-327de0f5241e.se"
      ,
      
        "title": "Joggesko",
        "i18n_lang": "no",
        "_id": "i18n.b4d654f7-2b47-4339-9a92-d9ad5d111b43.no"
      ,
      
        "title": "Joggeskor",
        "i18n_lang": "se",
        "_id": "i18n.b4d654f7-2b47-4339-9a92-d9ad5d111b43.se"
      ,
      
        "title": "test",
        "i18n_lang": "no",
        "_id": "i18n.c8a744b1-79f2-48e5-9fec-7be13a8af9df.no"
      ,
      
        "title": "test",
        "i18n_lang": "se",
        "_id": "i18n.c8a744b1-79f2-48e5-9fec-7be13a8af9df.se"
      
    ]
  

有趣的是,playground 托管在 https://<sanity-id>.api.sanity.io/v1/graphql/test/default,这与此处用于 apolloclient 的 URI 相同:

function createApolloClient() 
  return new ApolloClient(
    s-s-rMode: typeof window === 'undefined',
    link: new HttpLink(
      uri: 'https://<sanity-id>.api.sanity.io/v1/graphql/test/default', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
    ),
    cache: new InMemoryCache(),
  );

【问题讨论】:

在 github 上打开一个问题? 但我不知道这里的确切问题,可能与理智有关?或 ApolloClient。也许语言实现有问题? 我看不到来自 apolloclient 的任何网络请求,但我认为这是因为我在我的 nextjs 应用程序中使用服务器端渲染并在服务器上获取数据 使用“实时”客户端(侧项目)测试网络响应或尝试在规范化之前记录响应,例如使用链接 这是在归一化之前const data, error = await client.query( query: qlQuerytest, variables: locale , ); console.log(data); 【参考方案1】:

非根路径上的文档(例如,drafts.&lt;_id&gt;drafts.i18n.&lt;_id&gt;i18n.&lt;_id&gt; 等)在获取时需要进行身份验证,因为只有根路径上的文档(无点)在未经身份验证的情况下是公开可见的.您能否尝试在您的客户端配置中添加一个读取令牌,然后在您的查询中过滤掉草稿?

【讨论】:

你能举个例子吗? apollographql.com/docs/react/networking/authentication

以上是关于看起来 apollo 客户端不会查询 id 具有 . (点)使用 Next JS 和 Sanity CMS with GraphQL的主要内容,如果未能解决你的问题,请参考以下文章

Apollo / GraphQL 具有不同参数的相同查询

如何在 apollo 客户端策略中使用 readField 来选择具有参数的查询

当变量发生变化时,Apollo 客户端缓存不会在查询中更新

Graphql 查询和 Apollo

在 reactJS 中使用动态字段的 Apollo 客户端 graphql 查询

使用 Apollo 客户端和 React 的多个查询