CODEWITHSUNDEEP
apolloreact-apolloapollo-clientapollo-server
Pietrohl
Pietrohl

Reputation: 73

Apollo Client GraphQL creating static pages on Next.js getStaticProps

So I'm studing GraphQL by implementing a Apollo Client on Next.js, I've never implemented a GraphQL API or used Apollo, and am having some problems building and manipulation queries. I want to create a few static pages using SpaceX GraphQL server, and am using getStaticProps and getStaticPath to get the first 10 results from SpaceX server, create static pages form those routes and fetch launch details for each of the ids. My problem is that, I CANNOT make the launch details query work. The server is responding 400. Since the structure is corret the problem must be while passing the variable to the query.

Again, Ive never implemented a Apollo Client, and have a very begginer level knowleadge on graphQL and could not find the problem on using the docs. I've based my code on this example, I just dropped useQuery Hook so I can make the request inside getStaticProps. https://www.apollographql.com/docs/react/data/queries/

// [launchId].tsx
import { initializeApollo } from '../../lib/ApolloClient'


export const getStaticPaths: GetStaticPaths = async () => {
  const apolloClient = initializeApollo()
  const {
    data: { launchesPast }
  } = await apolloClient.query({
    query: gql`
      {
        launchesPast(limit: 10) {
          id
        }
      }
    `
  })
  const paths = launchesPast.map(element => {
    return {
      params: {
        launchId: element.id
      }
    }
  })
  return {
    paths,
    fallback: false
  }
}

export const getStaticProps: GetStaticProps = async context => {
  const apolloClient = initializeApollo()
  const { launchId: id } = context.params
  // const id = '100'
  console.log('id', id)
  console.log(typeof id)
  const query = gql`
    query Launch($id: id) {
      launch(id: $id) {
        details
      }
    }
  `

  const {
    loading,
    error = null,
    data: { launch }
  } = await apolloClient.query({ query: query, variables: { id: id } })

  return {
    props: {
      launch,
      loading,
      error
    },
    revalidate: 20
  }
}

//ApolloClient.ts

function createApolloClient(): ApolloClient<NormalizedCacheObject> {
  return new ApolloClient({
    // ssrMode: typeof window === 'null',
    link: new HttpLink({
      uri: 'https://api.spacex.land/graphql/'
    }),
    cache: new InMemoryCache()
  })
}

/*
// ApolloClient Singleton
*/
export function initializeApollo(
  initialState = null
): ApolloClient<NormalizedCacheObject> {
  const _apolloClient = apolloClient ?? createApolloClient()

  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract()

    // Restore the cache using the data passed from
    // getStaticProps/getServerSideProps combined with the existing cached data
    _apolloClient.cache.restore({ ...existingCache, ...initialState })
  }

  // For SSG and SSR always create a new Apollo Client
  if (typeof window === 'undefined') return _apolloClient

  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient
  return _apolloClient
}

export function useApollo(
  initialState: null
): ApolloClient<NormalizedCacheObject> {
  const store = useMemo(() => initializeApollo(initialState), [initialState])
  return store
}

Upvotes: 2

Views: 2884

Answers (1)

Pietrohl
Pietrohl

Reputation: 73

For anyone searching this, this was a stupid read of the SpaceX GraphQL API. The typeof id is ID (of course, I know), so that fixed it.

const { launchId: id } = context.params
 const query = gql`
   query($id: ID!) {
     launch(id: $id) {
       id
       details
     }
   }
 `

 const {
   loading,
   error = null,
   data: { launch = null }
 } = await apolloClient.query({ query: query, variables: { id: id } })

Upvotes: 5

Related Questions