Question

我试图导出一个命名的gql查询，以便在另一个反应组件中使用，以便调用它来更新apollo缓存。如果我使用PRODUCTS_QUERY，代码可以工作，因为我导出了const PRODUCTS_QUERY。但是，我更喜欢使用命名的gql变量＆products 39＆products;为了更好的命名约定。但是，当我使用＆＃39; productsQuery＆＃39;代替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");
  };

任何方式我都可以以允许我使用命名变量＆product 39产品的方式导出＆＃39;而不是＆PRODUCTS; PRODUCTS_QUERY＆＃39;因为命名的目的是使命名约定标准化。提前致谢

Answer 1

在Home.js文件中，您导出了两件事：

名称为PRODUCTS_QUERY
graphql操作为default

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

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

使其成功的几个选项：

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

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

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

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

Answer 2

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

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

重命名导入的语法与在其他js情况下重命名参数略有不同，这不会有效：

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

使用命名变量反应Apollo

2 个答案: