Apollo + GraphQL - эвристическое сопоставление фрагментов вручную

Как указано в документации, использование possibleTypes возможно только при использовании apollo-client версии 3.0 или выше, которая в настоящее время находится в стадии бета-тестирования. Если вы не используете пакет @apollo/client, как показано здесь, передача параметра possibleTypes ничего не даст.

Кроме того, вам необходимо убедиться, что каждое свойство в переданном вами объекте является именем объединения или интерфейса, а не именем поля. Из документации

Вы можете передать параметр possibleTypes конструктору InMemoryCache, чтобы указать отношения супертип-подтип в вашей схеме. Этот объект сопоставляет имя интерфейса или типа объединения (супертип) с типами, которые реализуют его или принадлежат к нему (подтипы).

Другими словами, вместо использования contentEngine в качестве ключа вы должны использовать любое имя типа поля contentEngine.

Если вы используете более раннюю версию apollo-client, вам необходимо создать IntrospectionFragmentMatcher, как указано в документах здесь.

Любой, кто приходит сюда, потому что он использует Craft CMS без головы, ответ выше правильный, но, чтобы сэкономить вам немного чтения, в основном вы должны позволить Apollo схемы.

import possibleTypes from './possibleTypes.json';
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData: possibleTypes
})

В том месте, где вы определяете своего клиента, добавьте следующее

cache: new InMemoryCache({
    fragmentMatcher
})

Чтобы сгенерировать свою схему, вы можете либо один раз выполнить приведенный ниже запрос, а затем вставить результаты в possibleTypes.json (не рекомендую, так как вы будете делать это много), ИЛИ, в качестве альтернативы, добавить этот процесс в свою nuxtInitServer функцию, чтобы она автоматически обновлялась.

query {
  __schema {
    types {
      name
      kind
      possibleTypes {
        name
        description
      }
    }
  }
}

Я сам боролся с этим, но после того, как @ mylesthe.dev (который ответил выше) поговорил со мной напрямую, чтобы предоставить фантастическую поддержку и несколько примеров, я понял это. Итак, для всех, кто все еще борется, как я, вот код (благодаря его работе), который, наконец, заставил меня работать:

Прежде всего, в вашем nuxt.config.js настройте свои конфигурации apollo:

// Apollo config and endpoint for graph ql
apollo: {
  includeNodeModules: true,
  clientConfigs: {
    default: '@/apollo/client-configs/default.js' // This is where you'll set up the client and import the possible fragment types
  }
},

Теперь мы создаем клиент apollo, настроенный с файлом схемы фрагмента (который мы создадим) в apollo/client-configs/default.js

import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import schema from './schema.json';
const fragmentMatcher = new IntrospectionFragmentMatcher({
    introspectionQueryResultData: schema
  })

export default ({req, app}) => {
    const token = process.env.GRAPHQL_TOKEN
    return {
        httpEndpoint: process.env.API_ENDPOINT,
        getAuth: () => `Bearer ${token}`, // remove if you're using the public schema
        cache: new InMemoryCache({ fragmentMatcher }),
    }
}

Теперь сохраните пустой schema.json файл в apollo/client-configs/.

Затем нам нужно настроить сценарий для запроса и генерации этой схемы на nuxtServerInit. Вам понадобится fs, чтобы написать файл схемы. Вы можете установить его с помощью NPM: npm install --save fs.

После установки вернитесь в свой nuxt.config и добавьте fs в сборку:

build: {
  extend (config, ctx) {
    config.node = {
      fs: 'empty'
    }
  }
}

Тогда в вашем store/index.js:

import Vuex from 'vuex';
import fetch from 'node-fetch';
import fs from 'fs';


const createStore = () => {
  return new Vuex.Store({
    actions: {
        async nuxtServerInit({commit}, {app}) {

            // only update fragements locally
            if (process.env.NODE_ENV == 'local') {
                 
                // LOAD FRAGMENT TYPES AND STORE IN FILE
                // APOLLO READS THIS FILE LATER
                fetch(process.env.API_ENDPOINT, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', authorization: 'Bearer ' + process.env.GRAPHQL_TOKEN, },
                    body: JSON.stringify({
                        variables: {},
                        query: `
                            {
                                __schema {
                                    types {
                                        kind
                                        name
                                        possibleTypes {
                                            name
                                        }
                                    }
                                }
                            }
                        `,
                    }),
                })
                .then(result => result.json())
                .then(result => {
                    // here we're filtering out any type information unrelated to unions or interfaces
                    const filteredData = result.data.__schema.types.filter(
                    type => type.possibleTypes !== null,
                    );
                    result.data.__schema.types = filteredData;
                    fs.writeFile('./apollo/client-configs/schema.json', JSON.stringify(result.data), err => {
                        if (err) {
                            console.error('Error writing fragmentTypes file', err);
                        }
                    });
                });

            }
            
        },
    }
  });
};

export default createStore

Теперь ваша схема должна быть сгенерирована локально в файле схемы, и этот файл будет храниться в кеше apollo.