Looks like apolloClient does not query entries with id that has . (dot) in them using NextJS and SanityCMS with GraphQL

Question

I have a SanityCMS with some data and localization (translations) and when the documents gets created they get a ID that looks something like i18n.b4d654f7-2b47-4339-9a92-d9ad5d111b43.no where the last seperation is the locale/language.

When i use the command sanity graphql deploy I get a api deployed with a playground to test GraphQL queries. This playground works fine, and shows everything I want to see.

But I have a frontend in NextJS where i use ApolloClient to comminucate with this api deployed by Sanity. I use the same URI created when making the playground/api for the ApolloClient, but for some wierd reason it only fetches the IDs that does not have any dot-separation

one basic testquery looks like this:

query test {
    allPage {
      title
      i18n_lang
      _id
    }
  }

this is the fetched data from apolloclient (as you can see only with _id without any dot-separation):

{
  allPage: [
    {
      __typename: 'Page',
      title: 'Men',
      i18n_lang: 'en',
      _id: '14df2893-d9e5-439d-a966-d41371085cf8'
    },
    {
      __typename: 'Page',
      title: 'Startpage - en',
      i18n_lang: 'en',
      _id: '179f7877-61c8-44be-9c0b-c5abb631c4d7'
    },
    {
      __typename: 'Page',
      title: 'Women',
      i18n_lang: 'en',
      _id: '40f6584c-1a1c-4574-8837-cfd9e9d062c7'
    },
    {
      __typename: 'Page',
      title: 'Badetøy',
      i18n_lang: 'en',
      _id: '49efb30f-f6e9-4aff-9d7f-944972d3a276'
    },
    {
      __typename: 'Page',
      title: 'Shoes',
      i18n_lang: 'en',
      _id: '9f9d1c7e-f983-4608-a066-327de0f5241e'
    },
    {
      __typename: 'Page',
      title: 'Sneakerss',
      i18n_lang: 'en',
      _id: 'b4d654f7-2b47-4339-9a92-d9ad5d111b43'
    },
    {
      __typename: 'Page',
      title: 'test',
      i18n_lang: null,
      _id: 'c8a744b1-79f2-48e5-9fec-7be13a8af9df'
    }
  ]
}

this is the data from the playground(clearly see the other ids here):

{
  "data": {
    "allPage": [
      {
        "title": "Men",
        "i18n_lang": "en",
        "_id": "14df2893-d9e5-439d-a966-d41371085cf8"
      },
      {
        "title": "Startpage - en",
        "i18n_lang": "en",
        "_id": "179f7877-61c8-44be-9c0b-c5abb631c4d7"
      },
      {
        "title": "Women",
        "i18n_lang": "en",
        "_id": "40f6584c-1a1c-4574-8837-cfd9e9d062c7"
      },
      {
        "title": "Badetøy",
        "i18n_lang": "en",
        "_id": "49efb30f-f6e9-4aff-9d7f-944972d3a276"
      },
      {
        "title": "Shoes",
        "i18n_lang": "en",
        "_id": "9f9d1c7e-f983-4608-a066-327de0f5241e"
      },
      {
        "title": "Sneakerss",
        "i18n_lang": "en",
        "_id": "b4d654f7-2b47-4339-9a92-d9ad5d111b43"
      },
      {
        "title": "test",
        "i18n_lang": null,
        "_id": "c8a744b1-79f2-48e5-9fec-7be13a8af9df"
      },
      {
        "title": "Startpage - en",
        "i18n_lang": "en",
        "_id": "drafts.179f7877-61c8-44be-9c0b-c5abb631c4d7"
      },
      {
        "title": "Shoes",
        "i18n_lang": "en",
        "_id": "drafts.9f9d1c7e-f983-4608-a066-327de0f5241e"
      },
      {
        "title": "Sneakerssssss",
        "i18n_lang": "en",
        "_id": "drafts.b4d654f7-2b47-4339-9a92-d9ad5d111b43"
      },
      {
        "title": "Kille",
        "i18n_lang": "se",
        "_id": "drafts.i18n.14df2893-d9e5-439d-a966-d41371085cf8.se"
      },
      {
        "title": "Startpage - no",
        "i18n_lang": "no",
        "_id": "drafts.i18n.179f7877-61c8-44be-9c0b-c5abb631c4d7.no"
      },
      {
        "title": "Badetøy",
        "i18n_lang": "no",
        "_id": "drafts.i18n.49efb30f-f6e9-4aff-9d7f-944972d3a276.no"
      },
      {
        "title": "Badetøy",
        "i18n_lang": "se",
        "_id": "drafts.i18n.49efb30f-f6e9-4aff-9d7f-944972d3a276.se"
      },
      {
        "title": "Sko",
        "i18n_lang": "no",
        "_id": "drafts.i18n.9f9d1c7e-f983-4608-a066-327de0f5241e.no"
      },
      {
        "title": "Joggesko",
        "i18n_lang": "no",
        "_id": "drafts.i18n.b4d654f7-2b47-4339-9a92-d9ad5d111b43.no"
      },
      {
        "title": "Herre",
        "i18n_lang": "no",
        "_id": "i18n.14df2893-d9e5-439d-a966-d41371085cf8.no"
      },
      {
        "title": "Kille",
        "i18n_lang": "se",
        "_id": "i18n.14df2893-d9e5-439d-a966-d41371085cf8.se"
      },
      {
        "title": "Startpage - no",
        "i18n_lang": "no",
        "_id": "i18n.179f7877-61c8-44be-9c0b-c5abb631c4d7.no"
      },
      {
        "title": "Startpage - se",
        "i18n_lang": "se",
        "_id": "i18n.179f7877-61c8-44be-9c0b-c5abb631c4d7.se"
      },
      {
        "title": "Dame",
        "i18n_lang": "no",
        "_id": "i18n.40f6584c-1a1c-4574-8837-cfd9e9d062c7.no"
      },
      {
        "title": "Sko",
        "i18n_lang": "no",
        "_id": "i18n.9f9d1c7e-f983-4608-a066-327de0f5241e.no"
      },
      {
        "title": "Skor",
        "i18n_lang": "se",
        "_id": "i18n.9f9d1c7e-f983-4608-a066-327de0f5241e.se"
      },
      {
        "title": "Joggesko",
        "i18n_lang": "no",
        "_id": "i18n.b4d654f7-2b47-4339-9a92-d9ad5d111b43.no"
      },
      {
        "title": "Joggeskor",
        "i18n_lang": "se",
        "_id": "i18n.b4d654f7-2b47-4339-9a92-d9ad5d111b43.se"
      },
      {
        "title": "test",
        "i18n_lang": "no",
        "_id": "i18n.c8a744b1-79f2-48e5-9fec-7be13a8af9df.no"
      },
      {
        "title": "test",
        "i18n_lang": "se",
        "_id": "i18n.c8a744b1-79f2-48e5-9fec-7be13a8af9df.se"
      }
    ]
  }
}

The funny thing is that the playground is hosted at https://<sanity-id>.api.sanity.io/v1/graphql/test/default, which is the same URI that is used here for the apolloclient:

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: new HttpLink({
      uri: 'https://<sanity-id>.api.sanity.io/v1/graphql/test/default', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
    }),
    cache: new InMemoryCache(),
  });
}

But I don't know the exact problem here, could be related to sanity maybe? or ApolloClient. Maybe theres something wrong with the language implemenation? — Kim Vu, Nov 10 '21 at 10:29
I can't see any networkrequest from the apolloclient, but I think it's because im using server side rendering in my nextjs app and fetching the data on the server — Kim Vu, Nov 10 '21 at 11:59
test network response using "live" client (side project) or try to log response before normalization, e.g. using links — xadm, Nov 10 '21 at 12:26
Is this before the normalization `const { data, error } = await client.query({ query: qlQuerytest, variables: { locale }, }); console.log(data);` — Kim Vu, Nov 10 '21 at 13:21
not, it isn't ... it's easier to use not SSR version ... for SSR you have to dig into internals/advanced options: https://www.apollographql.com/docs/react/networking/advanced-http-networking/#modifying-response-data - here you can log 'pure' response — xadm, Nov 10 '21 at 16:32

score 1 · Accepted Answer · answered Nov 10 '21 at 15:14

1

Documents on a non-root path (e.g., drafts.<_id>, drafts.i18n.<_id>, i18n.<_id>, etc.) will need authentication when fetching, as only documents on the root path (no dots) are publicly visible without authentication. Could you try adding a read token to your client configuration and then filtering out drafts in your query?

answered Nov 10 '21 at 15:14

Geoff Ball

743
3
14

can you give an example how to? – Kim Vu Nov 10 '21 at 15:35
1

https://www.apollographql.com/docs/react/networking/authentication/ – xadm Nov 10 '21 at 16:21

Looks like apolloClient does not query entries with id that has . (dot) in them using NextJS and SanityCMS with GraphQL

1 Answers1