通过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((。然后((res(=>console.log(res((；

"浏览器"选项卡"网络"浏览器选项卡网络

浏览器选项卡响应：

｛"errors"极限"位置"：[{"行"：1，"列"：1}]，"；"扩展"：{"代码"："GRAPHQL_VALIDATION_FAILED"}}]}

浏览器选项卡控制台：

POSThttps://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));