Why can't I make a graphql endpoint with apollo client?

himel
Shopify Partner
1 0 0

I am trying to use the apollo client on the frontend and make graphql queries from the frontend. 
On app.jsx I setup like this: 

import { BrowserRouter } from 'react-router-dom'
import Routes from './Routes'

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
import { ApolloProvider } from '@shopify/react-graphql'
import { Toaster } from 'react-hot-toast'
import { AppBridgeProvider, QueryProvider } from './components/providers'
import { useAuthenticatedFetch } from './hooks'

export default function App() {
  // Any .tsx or .jsx files in /pages will become a route
  // See documentation for <Routes /> for more info
  const pages = import.meta.globEager('./pages/**/!(*.test.[jt]sx)*.([jt]sx)')

  return (
    <BrowserRouter>
      <AppBridgeProvider>
        <QueryProvider>
          <ApolloWrapper>
            <Routes pages={pages} />
            <Toaster />
          </ApolloWrapper>
        </QueryProvider>
      </AppBridgeProvider>
    </BrowserRouter>
  )
}

const ApolloWrapper = ({ children }) => {
  const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      uri: '/api/shopify/graphql',
      credentials: 'include',
      fetch: useAuthenticatedFetch()
    })
  })
  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

and on the server index.js I created an endpoint

app.post('/api/shopify/graphql', async (req, res) => {
  try {
    const session = res.locals.shopify.session
    const response = await shopify.api.clients.graphqlProxy({
      session: session,
      rawBody: req.body
    })
    res.status(200).send(response.body)
  } catch (error) {
    res.status(500).send(error.message)
  }
})

But sadly It's not working, i am getting error: Cannot convert undefined or null to object

Here is my query example: 

import { gql, useQuery } from '@apollo/client'
const GET_ORDERS = gql`
  query GET_ORDERS {
    orders(first: 10) {
      nodes {
        id
      }
    }
  }
`

const Orders = () => {
const { loading, error, data } = useQuery(GET_ORDERS)
return (<></>)
}

 

Reply 1 (1)

peterpot20
Shopify Partner
22 2 3

I also have the same issue. Are you able to find a solution?