Согласно документации , опция fetchOptions
позволяет нам установить метод запроса на GET
. Я ожидал, что после этого запрос будет включен как параметр строки запроса, а не тело запроса; Chrome выдает ошибку, если вы пытаетесь сделать запрос GET с телом.
Предполагаемый результат:
Строка запроса должна быть создана, если метод запроса - GET.
Фактический результат:
Используется тело запроса.
Как воспроизвести проблему:
client.query({
context: {
fetchOptions: {
method: 'GET',
},
},
query: QUERY,
variables: { query },
})
@szdc да, это определенно не работает! Вы бы открыли его для добавления? Что-то вроде https://github.com/apollographql/apollo-link/issues/257 также может быть хорошим решением для преобразования запроса перед его отправкой?
cc @arackaf @ outlaw11a @puttyman, которые все заинтересованы в этом! Должно быть небольшое изменение, которое нужно добавить!
Я добавлю это, если никто не захочет.
@szdc @arackaf, оказывается, это уже возможно! Я скоро опубликую тест и документы, которые покажут, как это можно сделать без внутренних изменений.
@szdc @ Outlaw11A @arackaf вот как это сделать:
const customFetch = (uri, options) => {
const { body, ...newOptions } = options;
const queryString = objectToQuery(JSON.parse(body));
requestedString = uri + queryString;
return fetch(requestedString, newOptions);
};
const link = createHttpLink({
uri: "data",
fetchOptions: { method: "GET" },
fetch: customFetch
});
@jbaxleyiii выглядит потрясающе! Просто любопытно, откуда берется objectToQuery? Есть ли для этого утилита в npm? Я предполагаю, что было бы довольно легко просто свернуть свой собственный, если необходимо - в основном сопоставьте Object.keys на
escapeUriComponnt(`${k}=${obj[k]}`).join("&");
или что-то подобное
https://www.apollographql.com/docs/link/links/http.html#Sending -GET-requests-custom-fetching
@arackaf см. комментарий:
// turn the object into a query string, try object-to-querystring package
@jbaxleyiii работает! Это потрясающе!
Просто у меня проблема.
Созданная строка запроса:
http://localhost/graphql?operationName=AllPlayersQuery&variables=%5Bobject%20Object%5D&query=query%20All...
содержит это: variables=%5Bobject%20Object%5D
что является проблемой.
Как это исправить?
Это похоже на стандартную сериализацию URI - не думаю, что можно избежать этого - почему это проблема?
Стандартный URI? Это: %5Bobject%20Object%5D
?
encodeURIComponent ('books (title: "Hello World") {Book {title}}')
books(title%3A%22Hello%20World%22)%7BBook%7Btitle%7D%7D
Мой запрос в Apollo:
query AllPlayers {
players {
id
name
surname
}
и поэтому у меня проблема с пустыми переменными [Object object]
с кодом, опубликованным @jbaxleyiii.
Вот приложение для простых реакций (созданное с помощью create-response-app), которое загружается через GET и работает - см. index.js
: https://github.com/usefulio/example-graphql-via-get-react-app
@johnunclesam, очевидно, variables
не сериализуется перед кодированием. Я просто настроил свой собственный метод выборки (полученный из репозитория примера), добавив условный JSON.stringify
:
const customFetch = (uri, options) => {
const {body, ...newOptions} = options;
const parsedBody = JSON.parse(body);
const command = omitBy(parsedBody, isEmpty);
if (command.variables) {
command.variables = JSON.stringify(command.variables);
}
const requestedString = uri + '?' + queryString.stringify(command);
return fetch(requestedString, newOptions);
};
Итак, для чего используется useGETForQueries
? Почему пользовательская выборка не встроена, если useGETForQueries=true
?
Как отличить запрос от мутации? Я хочу использовать GET только для запроса (для DNS-кеша).
Это старая проблема, которая возникла до useGETForQueries, которая была добавлена немного после того, как это было исправлено https://github.com/apollographql/apollo-link/pull/510.
ммм, похоже, что useGETForQueries не работает.
В частности, в этой строке, похоже, есть ошибка:
let {
uri = '/graphql',
// use default global fetch if nothing passed in
fetch: fetcher,
includeExtensions,
useGETForQueries,
...requestOptions
} = linkOptions;
должно быть что-то вроде:
let {
uri = '/graphql',
// use default global fetch if nothing passed in
fetch: fetcher,
includeExtensions,
fetchOptions,
...requestOptions
} = linkOptions;
let {
useGETForQueries
} = fetchOptions;
что заставляет тебя говорить это? Как вы звоните createHttpLink
?
Мое наблюдение, приведенное выше, было связано с пошаговым выполнением кода с помощью отладчика, но мне пришлось бы повторить это снова, чтобы воспроизвести.
В итоге мы остановились на следующем коде:
import omitBy from 'lodash.omitby';
import isEmpty from 'lodash.isempty';
const graphQLUrl = 'http://the.server.com/graphql';
const customFetch = (uri, options) => {
const { body, credentials, headers, ...newOptions } = options;
let fetchUri = uri;
if (body) {
const parsedBody = JSON.parse(body);
const command = omitBy(parsedBody, isEmpty);
fetchUri = uri + "?" + queryString.stringify(command);
}
return fetch(fetchUri, newOptions);
};
const link = createHttpLink({
uri: graphQLUrl,
fetchOptions: { method: "GET" },
fetch: customFetch
});
Я предполагаю, что мой вопрос в том, что если бы вы передавали useGETForQueries
внутри fetchOptions
а не непосредственно внутри createHttpLink
, тогда вы бы наблюдали такое поведение, но это также не было бы как работает API. Я предлагаю попробовать еще раз!
Самый полезный комментарий
@szdc @ Outlaw11A @arackaf вот как это сделать: