Fetching [authenticated] data without hooks

[slowdub]

This is maybe tangentially related to #661 , but more specific question is whether it's possible to fetch data (authenticated and non-authenticated) in places outside of hooks. For example inside getserverSideProps or getStaticProps?

[slowdub]

I have the following use case in Next.js app:
I want to fetch some 3rd party data using private API key (i.e. I don't want to expose it in browser, so the natural place to do it is inside getStaticProps (or getserverSideProps), and then pass that data to component as props.

With hooks this is impossible to do as hooks can only be used inside React components and my environment variable (secret token) would have to be exposed in browser that way, so the only place to do this would be on server (but I can't use hooks there).

[theodesp]

Hello @blistok. Just to understand better. Is this 3rd party API a REST endpoint? Because you can still use the fetch api passing the API key as credentials and retrieve the data. For example:

export async function getStaticProps(context) {
  const res = await fetch(`https://...`, {
  method: 'GET',
  headers: {
    'X-API-KEY': 'apikey',
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: { data }, // will be passed to the page component as props
  }
}

Hooks are just a nicer way to perform side effects in the UI using react function components and they tend to replace class components. However there is nothing stopping you from using regular promises or libraries that handle side effects in the server side to perform requests to private APIs.

[slowdub]

@theodesp Thank you for your response. Apologies as I should have been clearer in describing my use case.
I have a dependency on data coming from WP.

So, these are the steps I want to do:

1. Fetch current viewer email and name from WP (this data is only available to authenticated requests)
2. Pass that data to 3rd party service (yes, that's making a POST request to their REST endpoint)
3. Pass the final data returned from step 2 as a prop

I'm clear on steps 2 and 3, but I don't know how to do step 1. The only way I see described for fetching data from WP is through hooks, but I can't use hooks inside getStaticProps or getserverSideProps.

[theodesp]

@blistok are you able to use the client.auth.client.query.user({id: "user_id"}).email directly within the getStaticProps or it fails?

[slowdub]

@theodesp It's returning undefined both for that and for client.auth.client.query.viewer.email (viewer field should be current viewer if they're logged in).

Also, any query inside getStaticProps/getserverSideProps is returning undefined for any leaf fields.
Even non-authenticated fields are returning undefined. For example:

client.client.query.posts().nodes[0].title

is undefined.

[blakewilson]

Hi @blistok,

In terms of fetching data on the server (getStaticProps, getServerSideProps), you can use client.client.inlineResolved(), which is a GQty core helper function for fetching data outside of React. You can view the docs on that here:
https://gqty.dev/docs/client/fetching-data

As for fetching authenticated data server side: this is currently not possible as our access token fetcher only operates clent side. I'll create a story to log this feature!

[slowdub]

Thank you @blakewilson.

For my specific use case I'll use api routes for now, but I think being able to fetch data on the server (both public and authenticated) would be a great feature to have.

[blakewilson]

Hey @blistok,

Just wanted to let you know we have this feature request tracked in our internal backlog:
https://wpengine.atlassian.net/browse/MERL-57

I'll post here once there is an update 👍