String cannot represent a non string value [Apollo client and nextjs]

String cannot represent a non string value [Apollo client and nextjs]


0

I am working on a project which uses apollo client and nextjs on the frontend and apollo server with nodejs on the backend

In nextJs when i am using getServerSideProps , i am passing a string variable "orderBy" with the query

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { query } = context
  const skip =
    (query.page ? (Number(query.page) ? Number(query.page) - 1 : 0) : 0 || 0) *
    pageSize
  const take = pageSize
  const { data } = await client.query({
    query: gql`
      query GetBattles {
        getBattles(take:${take} , skip:${skip} , orderBy:${"createdAt"}) {
         battles 
          {id
          uuid
          title
          status
          likeDislikeCount
          expires
          createdAt
        },
          total
        }
      }
    `,
    fetchPolicy: "network-only",
  })
  return {
    props: {
      initialBattles: data.getBattles.battles,
      total: data.getBattles.total,
    },
  }
}

Here i passed string "createdAt" to orderBy ,

this throws me the error

[GraphQL error]: Message: String cannot represent a non string value: createdAt, Location: [object Object], Path: undefined

but "createdAt" was clearly a string

my type definitions file

  type getBattlesResponse {
    battles:[Battle] 
    total:Int 
  } 
  getBattles(take:Int skip:Int orderBy:String): getBattlesResponse

my getBattleQuery resolver

  async getBattles(_: any, { take, skip, orderBy }) {
    const orderByOptions = ['title', 'expires', 'createdAt', 'likeDislikeCount']
    try {
      const [battles,count] = await Battle.findAndCount({
        relations: { battleUsers: { user: true } },
        take: take || undefined,
        skip: skip || undefined,
        order: orderByOptions.includes(orderBy)
          ? { [orderBy]: 'DESC' }
          : { createdAt: 'DESC' },
      })
      return {battles,total:count}
      
    } catch (err) {
      throw new Error(err)
    }
  },

my apollo client file

import {
  ApolloClient,
  createHttpLink,
  from,
  InMemoryCache,
} from "@apollo/client"
import { onError } from "@apollo/client/link/error"
import { setContext } from "@apollo/client/link/context"
import jwtDecode from "jwt-decode"
import { getAccessToken, setAccessToken } from "./accessToken"
import { TokenRefreshLink } from "apollo-link-token-refresh"

const httpLink = createHttpLink({
  uri: "https://localhost:3000/graphql",
  credentials: "include",
})

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors?.forEach(({ message, locations, path }) => {
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
      console.log(locations)
    })
  console.log(graphQLErrors)
  if (networkError) console.log(`[Network error]: ${networkError}`)
})

const authLink = setContext((_, { headers }) => {
  let authorizationHeader: string
  // get the authentication token from local storage if it exists
  const token = getAccessToken()
  // return the headers to the context so httpLink can read them
  if (token) authorizationHeader = `Bearer ${token}`
  else if (headers?.authorization)
    authorizationHeader = `Bearer ${headers.authorization}`
  else authorizationHeader = ""

  return {
    headers: {
      ...headers,
      authorization: authorizationHeader,
    },
  }
})

const refreshLink = new TokenRefreshLink({
  accessTokenField: "accessToken",
  isTokenValidOrUndefined: () => {
    const token = getAccessToken()
    if (!token) return true

    try {
      //@ts-ignore
      const { exp } = jwtDecode(token)
      if (Date.now() >= +exp * 1000) {
        return false
      } else {
        return true
      }
    } catch (err) {
      return false
    }
  },
  fetchAccessToken: () => {
    return fetch("https://localhost:3000/refresh_token", {
      method: "POST",
      credentials: "include",
    })
  },
  handleFetch: (accessToken) => {
    setAccessToken(accessToken)
  },
  handleError: (err) => {
    // full control over handling token fetch Error
    console.warn("Your refresh token is invalid. Try to relogin")
    console.error(err)

    // When the browser is offline and an error occurs we don’t want the user to be logged out of course.
    // We also don’t want to delete a JWT token from the `localStorage` in this case of course.
    // if (
    //   !navigator.onLine ||
    //   (err instanceof TypeError && err.message === 'Network request failed')
    // ) {
    //   console.log('Offline -> do nothing 🍵')
    // } else {
    //   console.log('Online -> log out 👋')
    //
    //   // your custom action here
    //   user.logout()
    // }
  },
})

const client = new ApolloClient({
  link: from([refreshLink, authLink, errorLink, httpLink]),
  cache: new InMemoryCache(),
})

export default client

This error only occurs on getServerSideProps
using useQuery by apolloClient doesn’t cause this error


Load 4 more related questions


Show fewer related questions

0



Leave a Reply

Your email address will not be published. Required fields are marked *