apollographql / apollo-link

:link: Interface for fetching and modifying control flow of GraphQL requests
https://www.apollographql.com/docs/link/
MIT License
1.44k stars 344 forks source link

Axios instance as fetch implementation #1265

Open jeremy-habit opened 4 years ago

jeremy-habit commented 4 years ago

Hello !

Expected Behavior

My project has an existing Axios client configured and I want to use it as fetch implementation for Apollo-Client http link.

Actual Behavior I'm working on a nextJs project, and I used the Nextjs example to implement the apollo client : https://github.com/zeit/next.js/tree/canary/examples/with-apollo. If I use 'isomorphic-unfetch' as fetch implementation it's working great.

But if I use my axios instance (which is called 'api' in the code reproduction), i get the following error :

response: { status: 500, statusText: 'Internal Server Error', headers: [Object], config: [Object], request: [ClientRequest], data: 'POST body missing. Did you forget use body-parser middleware?' },

A simple reproduction `import { ApolloClient } from 'apollo-client'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { HttpLink } from 'apollo-link-http'; import api from '#lib/api/api';

// Update the GraphQL endpoint to any instance of GraphQL that you like const GRAPHQL_URL = 'https://api.graphql.jobs/';

const link = new HttpLink({ uri: GRAPHQL_URL, // Server URL (must be absolute) credentials: 'same-origin', // Additional fetch() options like credentials or headers fetch: api, });

export default function createApolloClient(initialState, ctx) { // The ctx (NextPageContext) will only be present on the server. // use it to extract auth headers (ctx.req) or similar. return new ApolloClient({ ssrMode: Boolean(ctx), link, cache: new InMemoryCache().restore(initialState), }); } `

jeremy-habit commented 4 years ago

I used this : https://github.com/lifeomic/axios-fetch and it's working great.

Is someone see an other one solution ?

thank you