将变量传递给 React 中外部 requests.ts 文件中的 GraphQL 查询

Question

我正在使用 GraphQL 和 ApolloClient 构建一个 Next.js 应用程序来处理 API 请求。当使用内联 gql 查询将 ID 传递给 Next.js 方法 getStaticPaths 和 getStaticProps 时，我的页面工作正常并检索正确的数据，如下所示。

const { data } = await client.query({
  query: gql`
    query Page {
      page(id: "${slug}", idType: SLUG) {
        title
      }
    }
  `,
})

我现在开始将我的 gql 查询移动到单独的 requests.ts 文件中，我的问题是我正在努力寻找一种方法来传递上述请求中使用的

slug

变量。我尝试了以下方法，但没有成功：

import { getPageQuery } from 'queries'

const { data } = await client.query({
  query: getPageQuery,
})

// queries.ts

const getPageQuery = (slug: string) => gql`
  query Page {
    page(id: "${slug}", idType: SLUG) {
      title
    }
  }
`

寻找一些有关如何将 gql 查询保存在单独的文件中并能够根据需要传递任何动态数据的信息。

Answer 1

您需要创建 slug 变量。 例如：

export const getPageQuery = gql`
  query ($slug: String!) {
    page(where: { id: $slug }) {
      title
    }
  }
`;

以下是调用该请求的方法：

  const { data: res } = await client.query({
    query: getPageQuery,
    variables: { slug: slug },
  });

Answer 2

将变量传递给外部查询示例：

const GET_DOG_PHOTO = gql`
  query Dog($breed: String!) {
   dog(breed: $breed) {
    id
    displayImage
   }
  }`;


function DogPhoto({ breed }) {
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
  variables: { breed },
});

欲了解更多详情，请查看下面的链接

https://www.apollographql.com/docs/react/data/queries