通過 react(ApolloClient.query()) 方法從 GraphQL 服務器獲取數據

Question

首先對不起我的英語。 所以我試圖從 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));

瀏覽器選項卡網絡瀏覽器選項卡網絡

瀏覽器選項卡響應：

{"errors":[{"message":"查詢超出復雜性限制","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));

瀏覽器選項卡網絡瀏覽器選項卡網絡

並且瀏覽器選項卡響應是正確的

Answer 1

您嘗試使用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));