使用命名变量反应 Apollo

Posted 2023-03-10

【中文标题】使用命名变量反应 Apollo

【英文标题】：React Apollo using Named Variable

【发布时间】：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，我已经修改了源代码以突出显示工作代码和非工作代码。谢谢:)

【参考方案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";

【讨论】：

非常感谢斯蒂芬