'CORS, with Apollo client. Only being able to get results with the hook useQuery

This is my apollo client code.

import {
  ApolloClient,
  ApolloLink,
  createHttpLink,
  InMemoryCache
} from "@apollo/client"
import { setContext } from "@apollo/client/link/context"

let uri = `${process.env.NEXT_PUBLIC_API_URL}/wp/graphql`

const httpLink = createHttpLink({ uri, credentials: "include" })

const authLink = setContext((_, { headers }) => {
  headers
})

let client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
  defaultOptions: {
    query: {
      fetchPolicy: "no-cache"
    }
  }
})

export { client }

This is my page routing in next where i am trying a simple GraphQL Query.

export default function PrivatePath(props: any) {
  console.log("props:", props)
  const { data, loading, error } = useQuery(gql`
    query MyQuery {
      page(id: "/min-sida", idType: URI) {
        status
        title
      }
    }
  `)
  console.log("data:", data)
  return (
    <ApolloProvider client={client}>
      <AuthProvider>
        <div></div>
      </AuthProvider>
    </ApolloProvider>
  )
}
export async function getServerSideProps(context: any) {
  const slugs = context.query.path[0]

  const query = gql`
    query MyQuery {
      page(id: "/min-sida", idType: URI) {
        status
        title
      }
    }
  `
  const data = await client.query({ query: query })
  return {
    props: data
  }
}

What is interesting to me is that the hook useQuery, does what is expected and when logged in delivers the page title and status. The client.query, however, does not ever return page title and status, even when logged in it simple returns page: { null }.

My initial thought was that it was because getStatiProps in next won't be able to get the data no matter what, but it seems getServerSideProps is unable to do so as well?

Does anyone have a decent idea for solving this?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source