<p>apollo-link-http не учитывает переопределение метода GET</p>

Созданный на 12 нояб. 2017  ·  20Комментарии  ·  Источник: apollographql/apollo-link

Согласно документации , опция fetchOptions позволяет нам установить метод запроса на GET . Я ожидал, что после этого запрос будет включен как параметр строки запроса, а не тело запроса; Chrome выдает ошибку, если вы пытаетесь сделать запрос GET с телом.

Предполагаемый результат:
Строка запроса должна быть создана, если метод запроса - GET.

Фактический результат:
Используется тело запроса.

Как воспроизвести проблему:

client.query({
  context: {
    fetchOptions: {
      method: 'GET',
    },
  },
  query: QUERY,
  variables: { query },
})
enhancement

Самый полезный комментарий

@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
});

Все 20 Комментарий

@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

https://github.com/Cyberlane/object-to-querystring

@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 не работает.

В частности, в этой строке, похоже, есть ошибка:

https://github.com/apollographql/apollo-link/blob/f94b1c6b984619ec1ef68cca3224be788ea140e4/packages/apollo-link-http/src/httpLink.ts#L41

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. Я предлагаю попробовать еще раз!

Была ли эта страница полезной?
0 / 5 - 0 рейтинги