Home
Support Forums

Get data back from node-fetch, or pass variables in

  • we need to know your netlify site name: Not deployed yet. This is all in dev. (I have access to the server with the graphql, as well as the client, so I can see server errors. I do not want to introduce middleware to solve CORS issues.)

I am having a completely miserable time trying to use a node-fetch function purely to deal with CORS. I want it to act as a proxy server, that’s all – but find myself packing it with behaviour, to get the query to graphql to be well-formed.

I have a create-react-app, using Apollo-client to query GraphQL that requires authentication.

In App.js I do this:

const Thing = () => {
  # old non-node-fetch approach, before CORS errors bit me
  // const { data, loading } = useQuery(GET_WORK, {
  //   variables: { workSearch: { idEq: 1 } },
  // });

  return (
    <PDFViewer>
      <Doc data={data} />
    </PDFViewer>
  );
};

const httpLink = new HttpLink({
  uri: ".netlify/functions/node-fetch",
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

const App = () => (
  <ApolloProvider client={client}>
    <Thing />
  </ApolloProvider>
);

which calls my function fine:

# repo/.netlify/functions/node-fetch/node-fetch.js
const fetch = require("node-fetch");

const handler = async function () {
  try {
    const query = `
      query GetWork($workSearch: WorkSearchAttributes!) {
        work(workSearch: $workSearch) {
          id
          title
          subtitle
        }
      }
    `;

    const variables = {
      workSearch: { idEq: 1 },
    };

    const response = await fetch("http://localhost:3003/graphql", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        credentials: "include",
        authorization: "Token bcczzzzcab",
      },
      body: JSON.stringify({ query, variables }),
    });

    const data = await response.json();

    return {
      statusCode: 200,
      body: JSON.stringify({ data: data }),
    };
  } catch (error) {
    return {
      blah
    };
  }
};

module.exports = { handler };

That does successfully query GraphQL. But I’ve ended up putting the whole query in there because error messages such as “no query string” forced my hand.

So now I have node-fetch doing the whole call. That can’t be right, surely? Or if it is, how do I pass variables in? And how do I get data out into my App.js / runtime? I can see the query is successful on the node server console.

This is a classic “all I want to do is get around CORS” and yet I am now swimming with sharks. Help.

Hi @emma_b,

I’ve not used Apollo myself, so I’m not sure what it does. But, if your function works fine with the query in it, I don’t see a problem in sticking to that. However, this question confuses me:

Where exactly do you wish to pass and what variables are the ones that you need to pass?

You can simply do:

fetch('/.netlify/functions/name/').then(response => {
  if (response.ok) {
    return response.json()
  } else {
   throw response.status
  }
}).then(data => {
  console.log(data.data)
  /*
    data.data is the data that you need in client-side.
    I had to use data.data, because in your function,
    you're using JSON.stringify({data: data}),
    and that is creating an unnecessary object.
    If you simply write JSON.stringify(data),
    you can simply use console.log(data) here.
  */
}).catch(error => {
  console.log(error)
})