使用命名变量反应 Apollo答案

【问题标题】：React Apollo using Named Variable使用命名变量反应 Apollo
【发布时间】：2018-08-13 22:33:18
【问题描述】：

我试图导出一个命名的 gql 查询以在另一个反应组件中使用，以便调用它来更新 apollo 缓存。如果我使用 PRODUCTS_QUERY，则该代码有效，因为我导出了 const PRODUCTS_QUERY。但是，为了更好的命名约定，我更愿意使用命名的 gql 变量“productsQuery”。但是，当我使用 'productsQuery' 代替 PRODUCTS_QUERY 时，它会引发错误。有人成功使用了命名变量吗？请指教。提前致谢

在 Home.js 中

export const PRODUCTS_QUERY = gql`
  {
    products {
      id
      price
      pictureUrl
      name
    }
  }
`;

export default graphql(PRODUCTS_QUERY, { name: "productsQuery" })(Home);

在 AddProduct.js 中

// import { PRODUCTS_QUERY } from "./Home";
   import { productsQuery } from "./Home";

 try {
      let response = await this.props.mutate({
        variables: {
          name,
          price,
          picture
        },

//  - - - - - - - - THIS PART WORKS - - - - - - -
        // update: (store, { data: { createProduct } }) => {
        //   const data = store.readQuery({ query: PRODUCTS_QUERY });
        //   data.products.push(createProduct);
        //   store.writeQuery({ query: PRODUCTS_QUERY, data });
        // }

//  - - - - - - - - THIS PART FAILS - - - - - - -
        update: (store, { data: { createProduct } }) => {
          const data = store.readQuery({ query: productsQuery });
          data.products.push(createProduct);
          store.writeQuery({ query: productsQuery, data });
        }
      });
      console.log("RESPONSE", response);
    } catch (err) {
      console.log("ERROR", err);
    }

    this.props.navigation.navigate("Home");
  };

我可以以允许我使用命名变量“productsQuery”而不是“PRODUCTS_QUERY”的方式导出任何方式，因为命名的目的是使命名约定标准化。提前致谢

【问题讨论】：

请发布错误信息。另外，这是有效的代码，还是无效的代码？
嗨。以上代码有效。但是，我更喜欢使用命名变量“productsQuery”而不是“PRODUCTS_QUERY”（在代码中可以看到）。知道如何在我的更新存储函数中为我的 gql 查询 n 突变使用命名变量吗？
如果您发布不起作用的代码和错误消息，将更容易找出问题所在。否则，我只能猜测。
嗨，Tal Z，我已经修改了源代码以突出显示工作代码和非工作代码。谢谢:)

标签： graphql graphql-js react-apollo

【解决方案1】：

在您的 Home.js 文件中，您导出了 2 个内容：

名称为PRODUCTS_QUERY的查询
graphql 操作为default

按照现在的编写方式，您无法导入 { productsQuery }，因为您没有导出任何具有该确切名称的内容。

您在 graphql 操作中设置的 name 选项 ({ name: "productsQuery" }) 与您所描述的内容无关。该选项会影响组件将从查询中接收到的数据的道具名称。

一些使它起作用的选项：

在Home.js 中将PRODUCTS_QUERY 重命名为productsQuery 并使用相同的导入。
您可以在Home.js 中分配和导出productsQuery 而不是PRODUCTS_QUERY，如下所示：

export const productsQuery = PRODUCTS_QUERY;
如果您不想更改 Home.js，可以将导入更改为：

import { PRODUCTS_QUERY: productsQuery } from "./Home";

可能还有更多方法可以做到这一点。

【讨论】：

感谢塔尔 Z！当我使用 import { PRODUCTS_QUERY: productsQuery } from "./Home"; 时出现错误我使用来自“./Home”的 { PRODUCTS_QUERY as productsQuery }；它工作正常。
对于您的第二个建议 export const productsQuery = PRODUCTS_QUERY;不太确定如何实现它，因为我仍然需要导出默认的 graphql(PRODUCTS_QUERY, { name: "productsQuery" })(Home);让它工作；否则会报错
说实话，我应该只使用 graphql compose 函数并使用您对命名约定的第一个建议，这样可以使代码不那么冗长和简洁。非常感谢您的分享:)

【解决方案2】：

您需要使用as 重命名非默认导出。

import { PRODUCTS_QUERY as productsQuery } from "./Home";

重命名导入的语法与在其他 js 案例中重命名参数略有不同，这不会工作：

// Incorrect 
import { PRODUCTS_QUERY: productsQuery} from "./Home";

【讨论】：

非常感谢斯蒂芬