Question

有人知道如何在联合中使用片段吗？我已经看过React（https://www.apollographql.com/docs/react/advanced/fragments/#fragments-on-unions-and-interfaces）的文档，但在Vue上却看的不多。我有一个查询，返回两个片段，都带有__typename。

data() {
    return {
        result: []
    };
},
apollo: {
    // Query with parameters
    result: {
        // gql query
            query: gql'
                query search($queryString: String!) {
                    ... on Professor {
                        __typename
                        name
                    }
                    ... on Course { 
                        __typename
                        name
                        moduleCode
                    }
                }
            ',
            // Static parameters
            variables() {
               return {
                  queryString: 'lin mei'
                }
          }
    }
},

当vue应用运行时，我收到错误消息“您在查询中使用片段，但是在Apollo Client中未设置addTypename：true选项，或者您试图将片段写入商店没有__typename。”这是我的Vue应用程序中的代码。

// In my apollo client options
// Override default cache
cache: new InMemoryCache(
    { addTypename: true }
}

    public class RadioService extends Service implements
            Player.EventListener,
            AudioManager.OnAudioFocusChangeListener {
        @Override
    public void onCreate() {
        super.onCreate();
        audioManager = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
        notificationManager = new MediaNotificationManager(this);
        wifiLock = ((WifiManager) getApplicationContext().getSystemService(Context.WIFI_SERVICE))
                .createWifiLock(WifiManager.WIFI_MODE_FULL, "mcScPAmpLock");
        DefaultTrackSelector trackSelector = new DefaultTrackSelector();
        exoPlayer = ExoPlayerFactory.newSimpleInstance(getApplicationContext(), trackSelector);
        exoPlayer.addListener(this);
        registerReceiver(becomingNoisyReceiver, new IntentFilter(AudioManager.ACTION_AUDIO_BECOMING_NOISY));
        status = PlaybackStatus.IDLE;
    }


 @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        String action = intent.getAction();
        if (TextUtils.isEmpty(action)) return START_NOT_STICKY;
        int result = audioManager.requestAudioFocus(this, AudioManager.STREAM_MUSIC, AudioManager.AUDIOFOCUS_GAIN);
        if (result != AudioManager.AUDIOFOCUS_REQUEST_GRANTED) {
            stop();
            exoPlayer.setPlayWhenReady(false);
            Toast.makeText(this, "MUSIC SHOULD STOPPED", Toast.LENGTH_SHORT).show();
            return START_NOT_STICKY;
        }
        return START_NOT_STICKY;
    }

public void pause() {
        exoPlayer.setPlayWhenReady(false);
        audioManager.abandonAudioFocus(this);
        wifiLockRelease();
    }

    public void pauseToPlay() {
        if (isPlaying())
            exoPlayer.setPlayWhenReady(false);

    }

    public void stop() {
        exoPlayer.stop();
        audioManager.abandonAudioFocus(this);
        wifiLockRelease();
    }

我收到的错误消息是

您在查询中使用了片段，但都不具有addTypename：在Apollo客户端中设置了true选项，或者您正尝试在没有__typename的情况下将片段写入存储。编写片段时，请打开addTypename选项并包括__typename，以便Apollo Client 可以准确匹配片段。
不建议使用警告：使用不带__typename的片段是不受支持的行为，并将在以后的Apollo客户端版本中删除。您应该解决此问题，并将addTypename设置为true。
GraphQL错误：Professor上的片段无法在Query中传播； GraphQL错误：Course上的片段无法在Query中传播； GraphQL错误：变量$ queryString由搜索声明，但未使用
GraphQL错误：Professor上的片段无法在Query中传播； GraphQL错误：Course上的片段无法在Query中传播； GraphQL错误：变量$ queryString由搜索声明，但未使用

有人能提供一个示例，从vue的查询中获取两个片段吗？

Answer 1

您的查询不正确。您已将操作命名为view/add，但您可能想查询根类型上的此字段。像这样：

search

注意：因为我不知道您的架构，所以我也不能肯定上面的内容是有效的查询。如果要查询的服务器公开了GraphiQL或GraphQL Playground接口，则应使用该接口来验证查询，因为这两个工具都使用特定于模式的语法突出显示。

您可能希望向每个片段添加一个query ($queryString: String!) { search(queryString: $queryString) { ... on Professor { __typename name } ... on Course { __typename name moduleCode } } }或id字段，以确保正确的缓存行为。如果两个字段都不存在，则需要提供一个自定义_id函数。有关更多详细信息，请参见the docs。

如何在Vue.js中的Union上使用片段？

1 个答案: