使用 Svelte 从 Javascript 中的 GraphQL 查询访问数据时出现问题答案

【问题标题】：Problems accessing data from a GraphQL query in Javascript with Svelte使用 Svelte 从 Javascript 中的 GraphQL 查询访问数据时出现问题
【发布时间】：2021-06-04 08:35:01
【问题描述】：

下面我有我的工作函数，它使用我想尝试转换为 GraphQL 版本的普通 REST 响应，它从我的 Phoenix 服务器获取 JSON 文档并将 JSON 文档中的对象值存储到一个对象中。问题是，在这里我可以使用 await，然后从 JSON 文档中的对象分配新的对象值，但是使用 GraphQL 我无法访问这些数据来分配它，因为没有 await 函数，因为它只是一个查询。（据我所知）

async function updatePageWithNewCompany(company){
        const res = await fetch(`http://localhost:4000/${company}`);
        profile = await res.json();
        profile = profile.companyProfile 
            DashboardStore.update(currentData => {
                return {
                    id: profile.id,
                    companyName: `${profile.company_name}`,
                    averageLength: profile.average_length,
                    } 
                })

最后我问的是是否有一种方法可以在 JavaScript 中访问和分配来自 GraphQL 查询的数据，以便在我的前端 Svelte 应用程序中显示它之前对其进行操作。

当前 GraphQL 查询示例：

import { gql } from '@apollo/client'
import { client } from './apollo';
import { query, setClient } from "svelte-apollo";   

setClient(client)

const GET_COMPANY = gql`
      query{
        companyProfile(){
            companyName
            averageLength
            }
        }
    `;
const response = query(GET_COMPANY)
...

【问题讨论】：

标签： javascript graphql svelte

【解决方案1】：

svelte-apollo 查询返回

随着价值的到来而解决的承诺的精巧存储

如in the example query displayed in the documentation所述。

因此，您可以直接在脚本部分利用该格式。这是一个例子：

...
async function getCompany() {
  const companyStore = query(GET_COMPANY)
  const company = (await $companyStore).data.companyProfile
  return company  // format will be an object with keys { companyName, averageLength } according to your query
}
...

在旁注中，我建议始终在 GraphQL 查询中获取对象的 id，因为它通常是 Apollo 客户端内部用于管理其缓存的键（除非另有明确说明）。

【讨论】：

感谢您的回复，我之前确实尝试过类似的方法，这导致我提出了这个问题，使用您的方法应该可以！我得到的第一个错误是：'必须在组件的顶层声明商店（这可能会在未来的 Svelte 版本中改变） svelte(contextual-store)' 所以我将 const companyStore = query(GET_COMPANY) 移到了函数之外，然后我得到一个'await' has no effect on the type of this expression. js(80007) 错误，然后一旦运行错误是`Uncaught (in promise) TypeError: (intermediate value).data is undefined.
尝试在顶层添加一个简单的let companyStore 声明，并将赋值更改为companyStore = query(GET_COMPANY)，但将赋值保留在getCompany() 函数中。
感谢您的帮助，我找到了一个可行的解决方案，并已发布为答案。

【解决方案2】：

我在@Thomas-Hennes 的帮助下找到了一个可行的解决方案

import { client } from '../apollo.js';
import { onMount } from "svelte";
import { gql } from '@apollo/client'

export const COMPANY_LIST = gql`
    query {
        listCompanies{
            companyName
        }
     }
  `;

async function listCompanies() {
    await client.query({query: COMPANY_LIST})
          .then(res => {
              companyList.update( currentData => 
              [...res.data.listCompanies.companyName])})
        };

onMount(() =>{
    listCompanies()
})

await 不喜欢被分配给变量或对其数据进行操作，因此我将其用作承诺并操作响应。下面的链接帮助我找到了最后一块拼图。 https://docs.realm.io/sync/graphql-web-access/using-the-graphql-client

【讨论】：