<p>apollo-link-http no respeta una anulación del método GET</p>

Creado en 12 nov. 2017  ·  20Comentarios  ·  Fuente: apollographql/apollo-link

Según los documentos , la opción fetchOptions nos permite establecer el método de la solicitud en GET . Esperaría que después de hacerlo, la consulta se incluyera como un parámetro de cadena de consulta en lugar del cuerpo de la solicitud; Chrome arroja un error si intenta realizar una solicitud GET con un cuerpo.

Resultado esperado:
Se debe construir una cadena de consulta si el método de solicitud es GET.

Resultado real:
Se utiliza el cuerpo de la solicitud.

Cómo reproducir el problema:

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

Comentario más útil

@szdc @ Outlaw11A @arackaf aquí es cómo hacerlo:

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

Todos 20 comentarios

@szdc ¡Sí, esto definitivamente no funciona! ¿Estarías dispuesto a agregarlo? ¿Algo como https://github.com/apollographql/apollo-link/issues/257 también puede ser una buena solución para transformar la solicitud antes de enviarla?

cc @arackaf @ outlaw11a @puttyman ¡ todos están interesados ​​en esto! ¡Debería ser un cambio bastante pequeño para agregar!

Lo agregaré si nadie más quiere.

@szdc @arackaf, ¡ así que resulta que esto ya es posible! Pronto subiré una prueba y documentos que mostrarán cómo se puede hacer sin cambios internos

@szdc @ Outlaw11A @arackaf aquí es cómo hacerlo:

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 ¡ eso se ve increíble! ¿Solo tienes curiosidad por saber de dónde viene objectToQuery? ¿Hay alguna utilidad en npm para eso? Imagino que sería bastante fácil simplemente rodar el tuyo si fuera necesario, básicamente mapear Object.keys en

escapeUriComponnt(`${k}=${obj[k]}`).join("&");

o algo similar

https://www.apollographql.com/docs/link/links/http.html#Sending -GET-request-custom-fetching

@arackaf ver el comentario:

// turn the object into a query string, try object-to-querystring package

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

@jbaxleyiii ¡funciona! ¡Es asombroso!

Solo tengo un problema.

La cadena de consulta creada:

http://localhost/graphql?operationName=AllPlayersQuery&variables=%5Bobject%20Object%5D&query=query%20All...

contiene esto: variables=%5Bobject%20Object%5D que es un problema.

¿Cómo arreglar esto?

Eso parece una serialización URI estándar, no creo que pueda evitarlo, ¿por qué es un problema?

¿URI estándar? Esto: %5Bobject%20Object%5D ?

encodeURIComponent ('libros (título: "Hola mundo") {Libro {título}}')

books(title%3A%22Hello%20World%22)%7BBook%7Btitle%7D%7D

Mi consulta en Apollo es:

query AllPlayers {
  players {
    id
    name
    surname
}

y entonces tengo el problema con las variables [Object object] vacías con el código publicado por @jbaxleyiii.

Aquí hay una aplicación de reacción barebones (creada con create-react-app) que se recupera a través de GET y funciona; consulte index.js : https://github.com/usefulio/example-graphql-via-get-react-app

@johnunclesam obviamente variables no se serializa antes de la codificación. Simplemente ajusté mi método de búsqueda personalizado (obtenido del repositorio de ejemplo) agregando un 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);
};

Entonces, ¿para qué se usa useGETForQueries ? ¿Por qué la recuperación personalizada no está integrada cuando useGETForQueries=true ?
¿Cómo puedo diferenciar la consulta y la mutación? Solo quiero usar GET para consultas (para caché de DNS).

Este es un problema antiguo anterior a useGETForQueries, que se agregó un poco después de que https://github.com/apollographql/apollo-link/pull/510 lo solucionó.

umm, useGETForQueries parece no estar funcionando.

Específicamente en esta línea parece haber un error:

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;

debería ser algo como:

let {
    uri = '/graphql',
    // use default global fetch if nothing passed in
    fetch: fetcher,
    includeExtensions,
    fetchOptions,
    ...requestOptions
  } = linkOptions;

let {
  useGETForQueries
} = fetchOptions;

¿Qué te hace decir eso? ¿Cómo llamas a createHttpLink ?

Mi observación anterior fue de recorrer el código con un depurador, pero tendría que volver a hacerlo para reproducirlo.

El código con el que terminamos estableciéndonos es este:

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

Supongo que mi pregunta es, si estuviera pasando useGETForQueries dentro de fetchOptions lugar de directamente dentro de createHttpLink , entonces ese sería el comportamiento que observaría, pero tampoco lo sería cómo funciona la API. ¡Sugeriría darle una oportunidad de nuevo!

¿Fue útil esta página
0 / 5 - 0 calificaciones