通过reactApolloClient.query方法从GraphQL服务器中获取数据

问题描述

首先，对不起我的英语。 因此，我试图从GraphQL服务器获取一些数据，但遇到了一些问题， 那是我的代码：

import { createHttpLink } from 'apollo-link-http';
import { gql } from '@apollo/client';
import { ApolloClient,InMemoryCache } from '@apollo/client';
import 'babel-polyfill';

const httpLink = createHttpLink({
  uri: 'https://api.spacex.land/graphql/',headers: {
      authorization: 'Bearer MY_TOKEN',},});

const client = new ApolloClient({
  link: httpLink,cache: new InMemoryCache(),connectToDevTools: true,query: {
    fetchPolicy: 'network-only',errorPolicy: 'all',}
});

async function fetchedData(params) {
  const fetched = await client.query({
    query: gql`
      query {
        launchesPast(limit: 10) {
          mission_name
          launch_date_local
          launch_site {
            site_name_long
          }
          links {
            article_link
            video_link
          }
          rocket {
            rocket_name
            first_stage {
              cores {
                flight
                core {
                  reuse_count
                  status
                }
              }
            }
            second_stage {
              payloads {
                payload_type
                payload_mass_kg
                payload_mass_lbs
              }
            }
          }
          ships {
            name
            home_port
            image
          }
        }
      }
      `,fetchPolicy: "network-only",variables: null
  });
  return fetched;
}

导出默认的fetchedData（）。then（（res）=> console.log（res））;

Browser tab Network Browser tab Network

“浏览器”标签响应：

{“错误”：[{“消息”：“查询超出了复杂性 limit“，” locations“：[{” line“：1，” column“：1}]，” extensions“：{” code“：” GRAPHQL_VALIDATION_FAILED“}}]}}}

浏览器标签控制台：

POST https://api.spacex.land/graphql/ 400（错误请求）；

例如，通过GraphQLClient.request（）进行的同一查询正在工作。

import 'babel-polyfill';

import { GraphQLClient,gql } from 'graphql-request'

async function fetchedData() {
  const endpoint = 'https://api.spacex.land/graphql/'

  const graphQLClient = new GraphQLClient(endpoint,{
    headers: {
      authorization: 'Bearer MY_TOKEN',})

  const query = gql`query {
    launchesPast(limit: 10) {
      mission_name
      launch_date_local
      launch_site {
        site_name_long
      }
      links {
        article_link
        video_link
      }
      rocket {
        rocket_name
        first_stage {
          cores {
            flight
            core {
              reuse_count
              status
            }
          }
        }
        second_stage {
          payloads {
            payload_type
            payload_mass_kg
            payload_mass_lbs
          }
        }
      }
      ships {
        name
        home_port
        image
      }
    }
  }
  `

  const data = await graphQLClient.request(query)
  console.log(JSON.stringify(data,undefined,2))
  return data;
}
export default fetchedData().catch((error) => console.error(error));

Browser tab Network Browser tab Network

“浏览器”标签的响应正确

解决方法

您尝试使用variables参数来实现。这样吗？

const query = gql`query($limit: Int) {
    launchesPast(limit: $limit) {
      mission_name
      launch_date_local
      launch_site {
        site_name_long
      }
      links {
        article_link
        video_link
      }
      rocket {
        rocket_name
        first_stage {
          cores {
            flight
            core {
              reuse_count
              status
            }
          }
        }
        second_stage {
          payloads {
            payload_type
            payload_mass_kg
            payload_mass_lbs
          }
        }
      }
      ships {
        name
        home_port
        image
      }
    }
  }
  `
  const variables = { limit: 10 };
  
  const data = await graphQLClient.request(query,variables)

以您的情况

import {
    createHttpLink
} from 'apollo-link-http';
import {
    gql
} from '@apollo/client';
import {
    ApolloClient,InMemoryCache
} from '@apollo/client';
import 'babel-polyfill';

const httpLink = createHttpLink({
    uri: 'https://api.spacex.land/graphql/',headers: {
        authorization: 'Bearer MY_TOKEN',},});

const client = new ApolloClient({
    link: httpLink,cache: new InMemoryCache(),connectToDevTools: true,query: {
        fetchPolicy: 'network-only',errorPolicy: 'all',}
});

async function fetchedData(params) {
    const fetched = await client.query({
        query: gql`
        query($limit: Int) {
            launchesPast(limit: $limit) {
                mission_name
                launch_date_local
                launch_site {
                site_name_long
                }
                links {
                article_link
                video_link
                }
                rocket {
                rocket_name
                first_stage {
                    cores {
                    flight
                    core {
                        reuse_count
                        status
                    }
                    }
                }
                second_stage {
                    payloads {
                    payload_type
                    payload_mass_kg
                    payload_mass_lbs
                    }
                }
                }
                ships {
                name
                home_port
                image
                }
            }
        }
    `,fetchPolicy: "network-only",variables: {
            limit: 10,}
    });

    return fetched;
}
export default fetchedData().then((res) => console.log(res));