在Next.js中如何使用GraphQL传递动态账户查询变量？

你直接在gql模板字符串里拼接account变量的方式有问题，会导致生成的查询语法错误——因为字符串类型的参数需要被引号包裹，而你直接插入变量后，查询里的Account_contains: ${account}会变成不带引号的裸字符串，不符合GraphQL语法规范，同时这种写法也存在安全风险（比如注入攻击）。

正确的做法是使用GraphQL的变量机制来传递参数，具体实现如下：

1. 定义带变量的查询 #

import { gql } from '@apollo/client'; // 若使用其他GraphQL库，导入方式类似

const GET_ACTIVE_ITEM = gql`
  query GetActiveItems($account: String!) {
    activeFiles(
      first: 5
      where: { Account_contains: $account }
    ) {
      id
      tokenId
      ipfsHash
      Account
      Privilege
    }
  }
`;

这里定义了名为GetActiveItems的查询，声明了变量$account并指定类型为String!（!表示该变量为必填项），随后在查询条件中引用这个变量。

2. 调用查询时传递变量值 #

以Apollo Client为例，调用查询时通过variables参数传入account的值：

let account = '0x74c7b157af4E5418F03eb928DF309cc98CE38E66';

// 使用useQuery钩子的场景
const { loading, error, data } = useQuery(GET_ACTIVE_ITEM, {
  variables: { account },
});

// 使用client.query方法的场景
client.query({
  query: GET_ACTIVE_ITEM,
  variables: { account },
})
.then(result => console.log(result.data))
.catch(error => console.error(error));

这种方式既符合GraphQL语法规范，又避免了直接拼接字符串带来的问题，代码也更易维护。

内容的提问来源于stack exchange，提问作者Ashutosh Jha