ERROR: could not identify unique query

Help
,
1

Hello, we recently updated to “@apollo/experimental-nextjs-app-support”; We need this to run server queries.

The problem is that now our global store queries are throwing the error below when on first page visit/refresh.





Versions

"@apollo/client": "^3.11.8",
"@apollo/experimental-nextjs-app-support": "^0.11.5",



This is the error we’re getting

 const { serverQuery } = queryManager.getDocumentInfo(transformedDocument);
  1540 |     if (!serverQuery) {
> 1541 |       throw new Error("could not identify unique query");
       | ^
  1542 |     }
  1543 |     const canonicalVariables = canonicalStringify(options.variables || {});
  1544 |     const cacheKeyArr = [print(serverQuery), canonicalVariables];



Below is how we’ve setup the apollo wrapper


"use client";
import { HttpLink } from "@apollo/client";
import {
  ApolloNextAppProvider,
  ApolloClient,
} from "@apollo/experimental-nextjs-app-support";
import { getApiEndPoint } from "src/config";
import cache from '../src/lib/apollo/storage/cache';

// have a function to create a client for you
function makeClient(token) {
  const httpLink = new HttpLink({

    // this needs to be an absolute url, as relative urls cannot be used in SSR
    uri: getApiEndPoint(),
    headers: {
      authorization: `Bearer ${typeof window !== "undefined" ? localStorage.getItem("token") : token}`,
    },
    // you can override the default `fetchOptions` on a per query basis
    // via the `context` property on the options passed as a second argument
    // to an Apollo Client data fetching hook, e.g.:
  });
  
  // use the `ApolloClient` from "@apollo/experimental-nextjs-app-support"
  return new ApolloClient({
    // use the `InMemoryCache` from "@apollo/experimental-nextjs-app-support"
    // fetchOptions: { cache: "no-store" },
    cache,
    link: httpLink,
  });
}

// you need to create a component to wrap your app in
export function ApolloWrapper({ children, cookieToken }: { children: React.ReactNode, cookieToken: string }) {

  const client = makeClient(cookieToken); // Create Apollo client instance
  return (
    <ApolloNextAppProvider makeClient={() => client}>
      {children}
    </ApolloNextAppProvider>
  );
}



Here’s the query that’s erroring out (one of them, all global store queries are erroring out)

import { useQuery } from "@apollo/client";
import { GET_USER_STORE } from "../../queries";
import { storeVar } from "./apolloVars";


export default function useStore() {
  const { data } = useQuery(GET_USER_STORE, {
    fetchPolicy: "cache-only",
  });

  const store = data?.store;

  return {
    name: store?.name,
    address: store?.address,
    line_1: store?.line_1,
    city: store?.city,
    zipCode: store?.zipCode,
    country: store?.country,
    warehouseId: store?.warehouseId,
    external_ref: store?.external_ref,
    basePrice: store?.basePrice,
    id: store?.id,
    termsAndConditionsAccepted: store?.termsAndConditionsAccepted,
    users: store?.users,
    priority: store?.priority,
    customerDefinition: store?.customerDefinition,
    warehouseName: store?.warehouseName,
    currency: store?.currency,
    salesperson: store?.salesperson,
    status: store?.status,

    addStore({
      name,
      address,
      warehouseId,
      external_ref,
      basePrice,
      line_1,
      city,
      zipCode,
      country,
      id,
      termsAndConditionsAccepted,
      users,
      priority,
      customerDefinition,
      warehouseName,
      currency,
      salesperson,
      status
    }) {

      storeVar({
        name : name || store?.name, 
        address: address || store?.address,
        warehouseId: warehouseId || store?.warehouseId,
        country: country || store?.country,
        external_ref: external_ref || store?.external_ref,
        basePrice: basePrice || store?.basePrice,
        line_1: line_1 || store?.line_1,
        city: city || store?.city,
        zipCode : zipCode || store?.zipCode,
        id : id || store?.id,
        termsAndConditionsAccepted : termsAndConditionsAccepted || store?.termsAndConditionsAccepted,
        users : users || store?.users,
        priority : priority || store?.priority,
        customerDefinition : customerDefinition || store?.customerDefinition,
        warehouseName : warehouseName || store?.warehouseName,
        currency : currency || store?.currency,
        salesperson : salesperson || store?.salesperson,
        status: status || store?.status,
      });
    },
  };
}



Here’s how it’s all defined



export const GET_USER_STORE = gql`
  query GET_USER_STORE {
    store @client 
  }
`;
export const storeVar = makeVar<Store>(InitalStore);
2

We cannot stream queries from the server to the client that contain only client-local fields.

Also keep in mind that makeVar has the risk here to share data between all your users during SSR. It’s like a global variable.

3

I see you also opened an issue, let’s continue this there