如何发送带有查询的 Apollo 请求（graphql）？答案

【问题标题】：How to send an Apollo Request (graphql) with queries?如何发送带有查询的 Apollo 请求（graphql）？
【发布时间】：2021-04-23 13:04:00
【问题描述】：

我有这样的任务，所以发送带有这些参数的查询

 {operationName:getPostList,variables:{input:{type:post,locale:en,projectId:1}},query:query getPostList($input: PostSearchType) {\n  posts(input: $input, paging: {limit: 12}) {\n    items {\n      id\n    type\n   locale\n  shortDescription\n fullUrl\n   thumbnail\n   tags\n      title\n      publishedAt\n      __typename\n    }\n    __typename\n  }\n}\n"}

但是我不明白如何在 gql 函数中指定这些参数 (apollo-boost) 这是我的要求

const GET_MOVIES = gql`
{
    query getPostList($input: PostSearchType){
        posts(
            input:$input,
            paging : {
                limit:12
            }
            items{
                id,
                type,
                locale,
                shortDescription,
                fullUrl,
                thumbnail,
                tags,
                title,
                publishedAt,
                __typename
            }
            __typename
        )
    }
    "operationName":"getPostList",
    "variables":{
        "input":{
            "type":"post",
             "locale":"en",
             "projectId":1  
        }
    }
}

【问题讨论】：

您阅读过此文档吗？我希望这会有所帮助 - apollographql.com/docs/react/data/queries
是的，我已经阅读了文档，并且我正在按照文档的说明发送请求，但是我不断收到 GraphQLError: Syntax Error: Expected Name, found String "1"。
你能在这里添加一段代码，这样我就可以看到你是怎么做的？
@AbhishekRaj，我已经添加了我的代码。它会引发语法错误
gql 仅用于查询，其他内容是请求的一部分，搜索 axios 或获取示例/答案（带有变量的突变）...或更好的教程

标签： reactjs graphql apollo apollo-client

【解决方案1】：

请查看示例代码。您可以根据自己的需要进行调整。

/**
 * Sample code to showcase how queries work in React Apollo client
 */

import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";

const GET_MOVIES = gql`
  query getPostList($input: PostSearchType) {
    posts(input: $input) {
      id
      type
      locale
      shortDescription
      fullUrl
      thumbnail
      tags
      title
      publishedAt
      __typename
    }
  }
`;

const ApolloReactExample = () => {
  const { loading, data, error } = useQuery(GET_MOVIES, {
    variables: { input: "YOUR_INPUT" },
  });

  return <div></div>;
};

export default ApolloReactExample;

【讨论】：