Getting Stuck with Apollo

Dear @brillout,

Thank you for this plugin, it looks very promising.

update: seems to be working perfectly now!

If you have time, would you mind creating a very basic example using apollo client? I am probably doing something stupid but I don’t think I can figure it out on my own.

// apollo/index.ts
import 'cross-fetch/polyfill';
import { ApolloClient } from '@apollo/client'
import { InvalidationPolicyCache } from 'apollo-invalidation-policies';

export const client = new ApolloClient({
  cache: new InvalidationPolicyCache({}),
  uri: 'https://countries.trevorblades.com'
})

// pages/tests/index.page.server.ts
import { gql } from '@apollo/client'
import {client} from '../../apollo'

export { addContextProps }
export { setPageProps }

export const LIST_COUNTRIES = gql`
  {
    countries {
      name
      code
    }
  }
`;

async function addContextProps({ contextProps }) {
  const response = await client.query({query: LIST_COUNTRIES})

  return { countries: response.data.countries }
}

function setPageProps({ contextProps: { countries } }) {
  return { countries }
}

// pages/tests/index.page.tsx
import React from "react";
import { useQuery } from '@apollo/client'
import "./index.css";
import {client} from '../../apollo'
import {LIST_COUNTRIES} from './index.page.server'

export { Page };

function Page({countries}) {
  const {data} = useQuery(LIST_COUNTRIES, {client});
  console.log('countries', countries) // This is not working
  console.log('data', data) // This works 
  return (
    <>
      <h1>TEsts</h1>
      <p>A okay text.</p>
    </>
  );
}

Thank you very much,

Lydia

[LydiaF]

Hey @felixakiragreen, I deleted the last comment mistakenly if you read it, if you didnt: no good news from me. We couldn’t fix it in the end and I had spent ages refactoring so I didn’t get the circ dep warnings, but it still didn’t work. I can’t remember what exact the issue was but we figured it was probably the ssr circular dep issue in the vite repo and we decided, with heavy hearts, to let ssr go until it was fixed!

https://github.com/vitejs/vite/issues/2258

[brillout]

Make sure to use await:

await getDataFromTree(Page).then((_pageHtml)

Otherwise pageHtml won’t get set.

Also you should initialize the Apollo client only once at startup time, instead of initializing it on every HTTP request.